CSS中的BFC是什么?
发布网友
发布时间：2024-10-01 05:57
共1个回答
热心网友
时间：2024-10-09 17:35
大家好，我是前端西瓜哥。今天来学习BFC。
BFC，为BlockFormattingContext的缩写，中文翻译为块格式上下文。
BFC是Web页面CSS渲染的一个机制，是块级盒子布局中产生的区域。
你可以将一个BFC可以理解为一个容器，里面的元素不会影响到容器外的布局。
怎样的元素属于BFC？根元素，也就是HTML元素
浮动元素，即使用了float属性且值不为none
绝对定位元素
块级容器（如display的值为inline-blocks、table-cells、table-captions）
overflow的值不为visible的元素
使用了display:flow-root的元素。这是新出的值，专门用来创建无副作用的BFC。兼容性存疑，比较少用。
当然还有一些CSS属性也可以触发BFC，但比较少见，这里就不一一列举了，读者可自行阅读MDN文档。
目前来说，最常见的是通过overflow:hidden来构建BFC。一般情况下，它的副作用最小。但如果元素下有超出盒子范围的内容，会被截掉，请谨慎使用。
BFC的特性BFC主要有两个特性，我们来学习一下。
特性1：上下外边距重叠同一个BFC下的两个相邻块级元素，会发生上下方向的margin重叠。
比如前一个div设置了margin-bottom:20px，下一个div设置了margin-top:10px，然后你会发现它们的上下距离其实是20px（二者的最大值），而不是30px（二者之和）。
<style>.box{width:100px;height:100px;}.b1{background-color:bisque;margin-bottom:20px;}.b2{background-color:blueviolet;margin-top:10px;}</style><divclass="boxb1"></div><divclass="boxb2"></div>如果想避免这种情况，可以给这两个div裹上一个BFC。
<style>.container{overflow:hidden;}/*...*/</style><divclass="container"><divclass="boxb1"></div></div><divclass="container"><divclass="boxb2"></div></div>因为overflow:hidden有副作用，所以在实际开发中，我更喜欢用padding来替代margin。
特性2：浮动元素也会参与计算高度浮动，是非常奇怪的一种效果。效果类似word的文字环绕排版，可以让文字和内联样式环绕着它。
当一个元素被赋予浮动效果后，它会脱落正常文档流，向左或向右平移到所在容器的边框（border）位置，或者碰到另一个浮动元素为止。
浮动元素脱离了正常文档流，一般情况下，计算容器元素的高度时，是考虑浮动元素的高度的。
但BFC可以强行让浮动元素参与计算。
<style>.container{/*overflow:hidden;*/padding:5px;border:1pxsolid#000;}.box{float:left;width:100px;height:100px;background-color:cornflowerblue;}</style><divclass="container"><divclass="box"></div></div>上面的这种写法，没有给container应用BFC，会导致容器元素高度塌陷，效果见下图左边。
当我们将overflow:hidden的注释去除，容器元素就应用了BFC，就能得到我们想要的容器元素根据子元素自动撑高的效果了。效果见下图右边。
结尾BFC主要掌握它的两个特性就好了：
上下外边距重叠
浮动元素参与BFC高度计算
首发于我的公众号：前端西瓜哥
原文：https://juejin.cn/post/7098356495875588132