CSS BFC 块级格式化上下文
BFC 是一个独立的布局环境，其中的元素布局是不受外界的影响 ，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC 的规则
BFC 就是页面中的一个隔离的 独立容器 ， 容器内外的元素互不影响
BFC 就是一个块级元素，块级元素会在垂直方向一个接一个的排列
垂直方向的距离由 margin 决定。 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
<!--属于同一个 BFC 的两个相邻的 Box 会发生 margin 重叠，所以我们可以设置，两个不同的 BFC，也就是我们可以让把第二个 p 用 div 包起来，然后激活它使其成为一个 BFC -->
<style>
p {
margin: 30px;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
}
div{
overflow: hidden; /* 激活为 BFC */
}
</style>
<body>
<p>1 看看我的 margin 是多少</p>
<!--<p>2 看看我的 margin 是多少</p> -->
<div>
<p>2 看看我的 margin 是多少</p>
</div>
</body>
计算 BFC 的高度时，浮动元素也参与计算
<!--当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。-->
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
overflow: hidden; /*清除浮动，高度值浮动元素也参与计算*/
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
BFC 的区域不会与 float 元素重叠
BFC 触发条件
触发 BFC 条件的 CSS 属性：
overflow: hiddendisplay: inline-block | flex | table | table-cell | flow-rootposition: absolute | fixedfloat不为none
BFC 解决的问题
1. 两个元素 垂直 margin 外边距重叠问题
- 如果是父子元素外边距重叠，在父元素上添加
overflow: hidden或display: flow-root等即可 - 如果是相邻元素外边距重叠，在另一个元素上包裹一个
div即可
2. 使用 float 脱离文档流，高度塌陷问题
在浮动元素的相邻元素上添加触发 BFC 的 css 属性即可
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 如何实现扫码登录
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论