BFC(边距重叠解决方案)
渲染规则:
- 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠
- BFC的区域不会与浮动的元素重叠
- BFC里面是一个独立的容器外面的元素不会影响里面的元素,里面的元素同样不会影响外面的
- 计算BFC高度的时候,浮动元素也会参与计算
如何创建BFC:
- float值补位none
- position的值不是static、relative
- display的值为table-cell、 table-caption 等
- overflow不为 visible
BFC使用场景:
高度坍塌:
原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔,或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔,那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
防止垂直margin重叠:
父子元素的边界重叠得解决方案:
在父元素上加上overflow:hidden;使其成为BFC
兄弟元素的边界重叠,在第二个子元素创建一个BFC上下文
<section id="margin">
<p>1</p>
<div style="overflow:hidden;">
<p>2</p>
</div>
<p>3</p>
</section>