BFC

BFC （Block Formatting Context）块级格式化上下文，BFC是一块独立的渲染区域，有自己的渲染规则。内部的渲染区域只有Block-level box（块级元素）参与，BFC规定了内部的块级元素如何布局，不影响外面的元素，外面的元素也无法影响内部（就是BFC）的元素。

BFC的生成

根元素（也就是HTML元素）
float不为none
overflow不为visible
display为inline-block,table,flex,grid(inline-XXXX) 反正dispaly为block不会触发BFC
position为absolute和fixed

BFC的规则

属于同一个BFC的两个相邻块级元素的margin会重叠。-->解决margin塌陷
BFC的区域不会与float区域重叠 -->解决两栏布局
计算BFC的高度的时候，浮动的子元素与会参与计算 -->清除浮动
BFC是一个隔离的独立容器，容器里面的子元素不会影响外面，外面的元素也不会影响容器里面的元素。

清除浮动

清除浮动本质上只有两种方法

生成块级格式化上下文

overflow:hidden(计算BFC的高度时，浮动的子元素会参与计算)

利用clear属性

格外标签法
伪元素清除浮动
双伪元素清除浮动

详细说说clear属性

clear属性只能设置给块级元素，例如：一个元素设置clear:left.就是告诉浏览器“我的左边不要浮动元素，请调整一下位置”。如果在这个元素前有一个浮动元素，并且浮动元素浮动到了该元素上方。那么该元素就会被调整到浮动元素的下面去。

额外标签法

<style>
.clear{
clear:both   //该元素左右两边都不想要浮动元素。。。。
//那么该元素就会被移动到浮动元素的下方，而父元素会计算该元素的高度，自然也就恰好计算了浮动元素的高度。
}
</style>
 <div class="main">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="clear"></div>   //额外标签
    </div>

伪元素法

after伪元素是父元素的最后一个子元素
before伪元素是父元素的第一个子元素

.father::after{
content:"";   //伪元素必须设置该属性
dispaly:block;   //clear只对块级元素起作用
clear:both;   
visibility:hidden;   //隐藏该元素
}

CSS之BFC和清除浮动的本质

BFC