BFC 的场景及其应用+举例说明通过overflow：hiddle触发BFC的好处

爱被打了一巴掌 2022-12-22 08:59 111阅读 0赞

## BFC：Block Formatting Contexts (格式化上下文) 一块独立的渲染区域，就是规定这个区域内的元素无论如何怎么浮动都不会影响外面的元素，这就是BFC。 ##

**具有产生BFC条件：display属性为:block，list-item和table。**

**父元素实现方式**： 这些方式都是给容器父盒子添加的  
① 设置属性 display: inline-block，table-cell，flex 或 flow-root  
② float: 设置除none以外的值  
③ 是指绝对定位：postion为absolute 或 fixed  
④ overflow 除了 visible 以外的值 （hiddle，scroll，auto）

**产生BFC后的几条特性**：  
①在BFC中盒子是挨着顶端从上往下排布的；  
②同属于一个BFC的垂直方向盒子之间的margin会发生重叠；  
③在BFC中每一个盒子的左边框都会压着容器的左边框；  
④检测BFC容器盒子高度的时候也会检测到浮动元素的高度，将浮动元素的高度也做添加–应用于清除浮动(原理)；  
⑤BFC盒子会紧贴浮动盒子边缘；如果是以overflow：hiddle来触发BFC，那么他自己也是自适应的，浮动盒子打了他就变小了，浮动盒子小了他就变大了，自适应！因为overflow:hiddle会自动裁剪；

**适用场景**： ① 清除浮动：父级元素没有触发BFC，而子元素float了，因为float以后就不占文档流了，所以会溢出父元素影响其他元素，所以这个时候给父级元素设置一个实现方式如 display:，就会将子元素包含进去不影响其他布局。  
② 边界合并问题：垂直方向的两个元素的外边距会发生重叠，重叠以后的外边距为两个外边距的最大值，所以需要创建一个父容器div包含下面的，这样就不会影响其他了，原理是同属于一个BFC的外边距才可以合并。

【**注意**】一般实现BFC最好用overflow:hiddle，因为相比于其他定位什么，这个影响更小！

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>通过overflow:hiddle触发BFC</title>
    	<style> .fa { width: 600px; height: 600px; border: 1px solid #ddd; margin: 100px auto; overflow: hidden; } .float { width: 220px; height: 220px; float: left; background: yellow } .self { height: 350px; /* 别给width宽度，否则无法自适应 */ background: skyblue; overflow: hidden; } </style>
    </head>
    <body>
    	<div class="fa">
    		<div class="float"></div>
    		<div class="self">
    			这“十一个坚持”，系统阐述了新时代全面依法治国的战略思想和工作部署，
    			深刻回答了新时代为什么实行全面依法治国、
    			怎样实行全面依法治国等一系列重大问题，是新时代全面依法治国的根本遵循和行动指南。
    			<br>
    			<br>
    			<br>
    			<span>**设置hiddle后是一个自适应盒子**</span>
    		</div>
    	</div>
    </body>
    </html>

给左边黄色盒子给width宽度，右边蓝色盒子设置了hiddle就自适应排布  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d723e7efc5e5479b9d602d13aa083ca5.png