什么是BFC?
首先要了解什么BFC:
BFC 全称为 (Block Formatting Context) 块格式化上下文
它是一种功能,针对于 HTML文档 起作用,BFC 应该可以抽象成一个 独立的个体,就是正常的普通流布局规则,设置的样式是什么样的,就按正常的普通流布局的表现。
内部的子元素 不受外界的影响,外界的元素,也不受内部的元素的影响。各自独立生活在html这片空间下。
BFC触发条件:
【1】根元素,即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
BFC布局规则:
【1】Box会在垂直方向,一个接一个地放置(从左上角开始排列)
【2】Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(仅仅是垂直方向水平方向不会)
【3】每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
【4】BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响,外面的也不受BFC区域里面的影响(设置的浮动的元素,脱离了文档流,正常的相邻的元素会跑到它下面)
【5】计算BFC的高度时,浮动元素也参与计算(就是子元素设置浮动,脱离文档流,造成父元素高度塌陷,给父元素设置BFC,那么父元素高度就不会忽略浮动的子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流的元素,又拉回来了,但保持了浮动的特点)