开发者学堂课程【移动 Web 前端开发：分类页-两栏自适应】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8431
分类页-两栏自适应
目录
一、 方法
二、 应用
一、 方法
两栏自适应是由文本浮动衍生出的
<style>
Body{
margin: 0;
padding: 0;
}
div:first-child{
width: 100px;
height: 100px;
background: red;
float:left;//浮动元素作为环绕文字
}
</style>
</head >
<body >
<div>/<div>
内容……
这样就实现了文本环绕。这个文本环绕的特点是移动的过程中内容也是流动的，是自适应的。如果把左边的内容移到下面就形成了两栏自适应。虽然 div 是浮动的但<div>/<div>
<div>/<div>内容……
<div>
浮动会影响旁边的内容，如果用
包裹内容，则在页面中不会换行，因为浮动脱离了标准流。但是还会影响别的内容，清除浮动的原因就是第一占满高度，第二是使其不影响其它容器。
第一个Div 的宽度是整个浏览器的宽度461 px，第二个也是461 px
说明 第一个 div 与第二个 div 脱离标准流不冲突，但是浮动元素影响了 div 中的内容，设置 div 的内容不受浮动元素的影响，就不会覆盖内容。即设置浮动与内容互不影响。可以通过增加属性使两个 div 之间互不影响。
Div:last-child{
Overflow:hidden
当有一侧为浮动元素另一侧设置 overflow:hidden 就可以实现两栏自适应(Overflow:hidden 的作用是可以设置当前元素为绝缘容器，即不受其他元素影响，也不影响其他元素。)解释：为了不受浮动元素影响把内容用 div 包裹，这样两个容器互相绝缘，不会互相影响。类似于设置了 position overflow 在 position overflow 中宽度由内容决定。(浮动相关的详细内容可参考 bfc )
两栏自适应方案：一侧浮动并且固定宽度，另外一侧设置为 overflow:hidden。
详细可参考：
www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
二、应用
.cate_left{
width:90px;
height:100%;//高度和父容器保持一致，占满高度并且自适应。
float: left;
background:red;
}
.cate_right{
overflow:hidden;
background:black;
height:100%;
}
效果图如下：
拉动高度宽度，可以发现红黑形成了高度宽度自适应。右边的容器占满了剩余的高度和宽度，它是一个自适应容器。总体，红黑形成了两栏自适应。
