css左边div固定宽度,右边div自适应撑满剩下的宽度

利用bfc:
.left{
width:200px;
float:left;
}
.right{
overflow:hidden;
}
右边盒子触发bfc,使其不与浮动盒子区域重叠,因此会重新计算宽度。

 

补充一下:BFC翻译过来是块级格式化上下文,和haslayout比较相似,但haslayout是旧版本IE下的一个专有属性,表示元素自己对自身的内容进行组织和计算。BFC相当于一个独立的渲染单元,内外元素不会相互影响。我这里overflow:hidden触发BFC,利用的是BFC布局的一条特性,就是BFC的区域不会与浮动盒子重叠。BFC有很多特性,也有很多触发方式,感兴趣的同学可以google深入了解下。
posted @ 2017-11-27 14:34  斯威夫特  阅读(226)  评论(0)    收藏  举报