【CSS】什么是BFC？
块级格式化上下文（Block Formatting Context，简称BFC）是CSS布局中的一种重要概念，它决定了块级盒子如何在其容器内排列，以及浮动元素对其周围元素的影响。理解BFC可以帮助解决许多常见的网页布局问题，比如清除浮动、防止外边距重叠等。
BFC的触发条件
以下情况会自动创建一个新的BFC：
- 根元素。
- 明确设置了
display: flow-root的元素。 - 设置了
float属性（非none）的元素。 - 设置了
position为absolute或fixed的元素。 - 弹性盒模型（Flexbox）或网格布局（Grid Layout）的容器。
- 当
overflow属性不是visible时（如auto,scroll,hidden）。
BFC的特点
**垂直方向上的相邻兄弟元素不会发生外边距重叠。**在同一个BFC内部，两个相邻的块级元素之间如果有外边距，这两个外边距不会发生重叠。
<div style="margin-bottom: 20px;">Div 1</div>
<div style="margin-top: 30px;">Div 2</div>
如果Div 1和Div 2都在同一个BFC中，它们之间的间距将是两者外边距之和，而不是两者相加的最大值。
- **BFC内的元素不会受到外部浮动元素的影响。**这意味着，即使父元素中有其他浮动元素，BFC内的元素也不会被这些浮动元素所影响，而是根据自身的定位和尺寸进行布局。
- **BFC可以包含浮动元素。**如果一个元素创建了自己的BFC，那么它可以包含浮动元素而不会导致自身高度塌陷。
- **BFC可以阻止清除效果溢出。**如果一个元素内部有浮动元素，可以通过创建BFC来包含这些浮动元素，从而避免其影响到外部元素。
如何利用BFC解决问题
清除浮动
.parent {
overflow: auto; /* 或者 display: flex */
}
.child {
float: left;
}
防止外边距重叠
.block {
margin-bottom: 20px;
overflow: hidden; /* 创建BFC */
}
布局控制
.container {
position: relative;
overflow: auto; /* 创建BFC */
}
.item {
float: left;
}
总之，BFC是CSS布局中非常有用的概念，掌握它的特性和应用技巧能够帮助开发者更有效地控制网页布局，特别是在处理复杂布局和浮动元素时。
原文地址：https://blog.csdn.net/zSY_snake/article/details/143685239
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！