BFC和清除浮动

作者: 肉肉肉肉_包 | 来源:发表于2019-06-03 20:29 被阅读0次

技术知识点整理
BFC
清除浮动
清除浮动和BFC
BFC和清除浮动
关于 BFC 的布局应用：清除浮动、文字环绕
CSS清除浮动（Clear与BFC）
CSS—清除浮动和BFC
清除浮动
浮动与定位

什么是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>