BFC
一:在了解 BFC
之前首先需要了解 css
布局,了解标准流、非标准流,以及相互影响。
标准流:
- 块级元素独立占据一行,自上向下排列;
- 行内元素从左至右排列,知道填满一行才进行换行;
非标准流:
浮动,绝对定位会使元素脱离文档流;
二:BFC
可以理解为一个区域,在这个区域内的元素无论如何布局排版,都不影响区域外的元素。
三:以下方法都会触发BFC
:
-
body
根元素 -
浮动元素:
float
除none
以外的值 -
绝对定位元素:
position (absolute、fixed)
-
display
为inline-block
、table-cells
、flex
-
overflow
除了visible
以外的值(hidden、auto、scroll)