(1)是一种布局规范。具有BFC特性的元素可视作独立容器,容器里的元素在布局上不会影响到外部元素
(2)触发BFC的条件:
a,浮动元素:float除none以外的值
b,绝对定位元素:position(absolute、fixed)
c,display值为inline-block、table-cells、flex
d,overflow除visible以外的值
(3)适用情景:
a,解决margin叠加的问题:
eg,margin-bottom:30px + margin-top:50px->取50px为两个div之间的margin
b,解决margin传递的问题:
eg,子元素的margin会传递给父元素
c,解决浮动问题:
eg,嵌套div时,子div决定着父div的高度,若加float给子元素,则子元素会脱离文档流,父元素会失去高度->让父容器触发BFC
d,解决浮动覆盖问题:
eg,两个div,第一个div添加float:left后脱离文档流,第一个div会覆盖第二个div(不会覆盖其中文字)->让第二个div触发BFC