css中的块级格式化上下文（BFC）

最新推荐文章于 2024-07-08 16:02:09 发布

格子衫大背头

最新推荐文章于 2024-07-08 16:02:09 发布

阅读量369

点赞数 9

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Yb20740136/article/details/135745107

版权

一、BFC（Block Formating Conntext）即块级格式化上下文，它是页面的一块渲染区域，并且有一套属于自己的渲染规则：

内部盒子会在垂直方向一个接一个排列。
对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的⾼度时，浮动⼦元素也参与计算
BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然
BFC ⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素

二、触发条件

触发 BFC 的条件包含不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline
flex、grid、inline-grid
position的值为absolute或fixed

三、防⽌margin重叠（塌陷）

<style>
 p {
 color: #f55;
 background: #fcc;
 width: 200px;
 line-height: 100px;
 text-align:center;
 margin: 100px;
 }
</style>
<body>
 <p>Haha</p >
 <p>Hehe</p >
</body>

两个 p 元素之间的距离为 100px ，发⽣了 margin 重叠（塌陷），以最⼤的为准，如果第⼀个P的 margin 为80的话，两个P之间的距离还是100，以最⼤的为准。前⾯讲到，同⼀个 BFC 的俩个相邻的盒⼦的 margin 会发⽣重叠可以在 p 外⾯包裹⼀层容器，并触发这个容器⽣成⼀个 BFC

，那么两个 p 就不属于同⼀个 BFC , 则不会出现 margin 重叠。

<style>
 .wrap {
 overflow: hidden;// 新的BFC
 }
 p {
 color: #f55;
 background: #fcc;
 width: 200px;
 line-height: 100px;
 text-align:center;
 margin: 100px;
 }
</style>
<body>
 <p>Haha</p >
 <div class="wrap">
 <p>Hehe</p >
 </div>
</body>