BFC是什么?能解决什么问题?
1.什么是BFC?
W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为”visiable”的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。
2.BFC的触发条件
满足以下任意一个或多个条件,即可触发BFC:
根元素(html)
浮动元素(float不为none)
position为absolute或fixed的定位元素
行内块元素(display:inline-block)
display值为table-cell或table-caption的元素
overflow的值不为visible的块级元素
网格元素(display为grid或inline-grid)
3.BFC渲染规则
BFC垂直方向边距重叠
BFC的区域不会与浮动元素的box重叠
BFC是一个独立的容器,外面的元素不会影响里面的元素
计算BFC高度的时候浮动元素也会参与计算
4.能解决的问题
1.防止浮动导致父元素高度塌陷
现有如下页面代码:
1 | <!DOCTYPE html> |
如果将inner元素设为浮动:
1 | .inner { |
就会产生塌陷:
但我们对父元素设置BFC之后,这样的问题就解决了:
1 | .container { |
2.避免外边距合并
两个块同一个BFC会造成外边距合并,但如果对这两个块分别设置BFC,那么边距重叠的问题就不存在了。
现有代码如下:
1 | <!DOCTYPE html> |
按照我们的设置,中间的inner与第一个和第三个inner之间的间距应为20px,由于这三个元素同属于一个BFC,导致它们的外边距合并了,三个元素的上下间距都是10px。现在我们做如下操作:
1 | <div class="container"> |
style:
1 | .bfc{ |
效果如下:
问题就解决了。