css之流体特性和BFC

1.流体特性

块级元素默认情况下，自动占满整个父容器，在添加margin，padding,border后，实际content区域自动变化

利用这个特性，可以实现宽度已知的多栏布局

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

.div2{margin:0 200px;}
.div1{float:left;width:200px}
.div3{float:right;width:200px}

center中margin可替换为padding,border，都可将中间栏的内容压缩，left和right也可通过absolute定位。

2.BFC（块级格式化上下文）

BFC是将该元素隔离开，无论元素内怎么变化，都不影响其外de元素

产生BFC的方式：1.overflow:hidden,auto,scroll;2.float不是none;3.position:absolute,fixed；4.display:inline-block,table-cell,table-caption

BFC和浮动实现自适应布局

.div1,div2{float:left;}
.div3{overflow:hidden;}

div1和div2宽度随内容变化，div3占满div1，div2剩下的部分。div3产生BFC，同时保留块级元素的流体特性。

 

转载于:https://www.cnblogs.com/cassie-coder/p/8716578.html