css布局之浮动模型&&左右两栏自适应布局

一个元素浮动时，其他内容会“环绕”该元素，浮动元素要设置一个width。浮动元素会自动生成一个块级框（行内元素会转成块级元素）。

浮动元素规则

浮动元素不能超过包含它的块的左右内边界。

浮动元素之前如果出现浮动元素，则必须在该浮动元素之后（不能覆盖 )。如果浮动元素加一起太宽，会自动向下。

垂直方向要顶头不能超过块区域，同样不能超过在它上面的浮动元素。

浮动元素脱离文档流，不占据空间。不浮动的块级元素会占据浮动元素的空间，被覆盖。但是块级元素中的文本和行内元素不会被覆盖，会形成环绕。

左右两栏自适应布局

左边栏固定宽度，右边栏自适应宽度

<div id="main">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
#main{
    background-color: green;
    float: left;
    width: 100%;
}
.left{
    background-color: red;
    height: 500px;
    width: 200px;
    float: left;
}
.right{
    background-color: blue;
    overflow: hidden;//形成BFC
}

左中右三栏自适应布局

左右两栏固定宽度，中间栏自适应

#main{
    background-color: green;
    float: left;
    width: 100%;
}
.left{
    background-color: red;
    height: 500px;
    width: 200px;
    float: left;
}
.center{
    background-color: blue;
    overflow: hidden;
}
.right{
    background-color: red;
    height: 500px;
    width: 200px;
    float: right;
}
<div id="main">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="center">中间</div>
</div>