你不知道的BFC
时间：2023-03-31 01:41:07
CSS
概述BFC就是BlockFormattingContext。根据MDN上的定义，它是网页中CSS可视化渲染的一部分，代表一个渲染区域，块级元素被布局在这个渲染区域中，浮动元素与该区域中的其他元素进行交互。一般理解为页面布局规则中的一小套规则，在页面整体布局中为迷你布局。BFC是一个容器，按照一定的规则布局，不会影响容器外的其他元素。BFC容器的产生是有一定条件的，BFC是CSS布局的基石。1.触发BFC生成的条件?根元素（，可以解释页面正常流中块元素的行为）?浮动元素（元素的float属性不是none）?绝对定位元素（元素的position属性是绝对的或固定的）?内联块元素（元素的显示属性是inline-block）?表格单元格（元素的显示属性是table-cell，这是HTML表格单元格的默认值）?表格标题（元素的显示属性为table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的显示为table,table-row,table-row-group,table-header-group,table-footer-group（分别为HTMLtable,row,tbody,thead,tfoot的默认属性）或inline-table）?计算溢出值（Computed）不可见的块元素?显示值为flow-root的元素?包含值为的元素布局、内容或绘画?flex元素（display是flex或inline-flex元素的直接子元素）?grid元素（display是grid或inline-grid元素的直接子元素）?多列容器（元素的列数或column-width(en-US)不是自动的，包括column-count为1)?column-span为all的元素总是创建一个新的BFC，即使该元素没有包装在多列容器中（标准更改,Chromebug)II.BFC中的布局规则Box会在垂直方向一个接一个的放置；Box的垂直距离由margin决定。属于同一个BFC的两个相邻Boxes的margin会合并，如下图4；在BFC中，每个框的左外边缘（margin-left）将触及容器的左边缘（border-left）（对于从右到左的格式，它触及右边缘）；对于浮动元素：BFC的区域不与浮动框相交，而是紧贴浮动边缘；在计算BFC的高度时，还会检测浮动或定位框的高度。三、BFC可以做什么1、当父容器包含浮动元素时，高度塌陷我是左浮动元素
这里是文本，如果文本量大到足以包围浮动图像，边框将框住整个
.outer{border:5pxdottedrgb(214,129,137);border-radius:5px;width:450px;padding:10px;margin-bottom:40px;}.float{padding:10px;border:5pxsolidrgba(214,129,137,.4);边界半径：5px；背景色：rgba(233,78,119,.4)；颜色：#fff；浮动：左；width:200px;margin:020px00;}图1-文字足够，高度可以包围浮动元素：图2-文字少，高度塌陷：为什么高度塌陷？这是因为当元素设置为浮动时，它脱离了正常的文档流。此时，因为容器outer没有设置高度，所以高度是根据文本在正常流中的高度。浮动元素与容器边界重叠。有哪些解决方案？1.使用CSShack：clearfloating；2、使用本文中的BFC，将容器outer触发成一个BFC，用于包裹浮动元素。.outer{border:5pxdottedrgb(214,129,137);border-radius:5px;width:450px;padding:10px;margin-bottom:40px;/*方案二：overflow:auto;ordisplay:flow-root;*/}/*方案一：设置一个不可见的伪元素并清除浮动*/.outer:after{visibility:hidden;display:block;content:"";clear:both;height:0;}图3:2。垂直方向的MarginMerging我们先来看一段代码，感受一下什么是MarginMerging。可以看到，当两个段落都设置了10px的上下外边距时，p1和p2之间实际上只有一个10px，而不是20px。另外，如果容器不是生成为BFC，p1段的上边距不会生效，会和div完全重叠，如图4。
我是容器中的p1段
我是容器中的p2段
.container{background-color:#ccc;}p{背景色：rgb(233,78,119);边距：10px0；}图4：对比图4的两个不同点，可以看到容器转换为BFC区域后p1和p2的上下边距生效。为了理解同一个BFC中的边距会合并，添加一个p3，放在不同的BFC中。从图5可以看出，此时p3和p2的正常距离为20px。由此也可以解释，BFC包含了它所包含的所有元素，但不包含创建新BFC的子元素的内部元素。也就是说，一个人不可能同时踏入两条河流，BFC也是如此。一个元素不可能同时属于两个BFC。
