清除浮动clear/BFC

Posted 2020-07-15 Silence

浮动的清除有两种方式：

一、clear

　　clear:both/left/right;

二、创建BFC

　　（1）什么是BFC？

　　BFC，块级格式化上下文，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗的讲就是相当于一个把浮动的元素框起来并隔离的容器，容器里面的子元素不会影响到外面元素，使浮动不会溢出。

　　（2）哪些元素会生成BFC？

　　①根元素或其它包含它的元素

　　②float的值不为none

　　③overflow的值不为visible

　　④display的值为inline-block/table-cell（表格单元格）/table-caption（表格标题）/flex/inline-flex

　　⑤position的值为absolute/fixed

　　（3）BFC还有哪些作用？

　　BFC除了可以用来清除浮动，还可以用于防止margin折叠、左右两栏布局这两个作用。