什么是BFC？
BFC（块格式化上下文 (Block Formatting Context)）是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的原理（渲染规则）：
1.垂直方向发生重叠
2.BFC的区域不会与box重叠（因此可以用来清除浮动）
3.BFC是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素也不会影响外面的元素
4.计算BFC的高度时，浮动元素不参与计算
如何创建BFC
1.float的值不为null
2.position的值不为static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值为hidden或者auto
清除浮动的四种方式
1.overflow: hidden
找到浮动元素的父元素，添加overflow: hidden，触发BFC清除浮动
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
2.额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；
缺点：margin失效。两个div之间，没有任何的间隙
3.使用after伪元素清除浮动
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
网友评论