到底用对BFC了吗？

余大侠在劈柴

已于 2024-04-26 17:33:42 修改

阅读量913

点赞数 20

文章标签： html css 前端 vue.js html5 css3

于 2024-04-26 15:29:36 首次发布

本文链接：https://blog.csdn.net/weixin_62936589/article/details/138218973

版权

本文详细解释了BFC（BlockFormattingContext）的概念、触发条件，以及如何利用BFC解决margin重叠问题、清除浮动和实现自适应多栏布局。通过实例演示，展示了BFC在网页布局优化中的重要作用。

摘要由CSDN通过智能技术生成

一、BFC是什么?

我们在页面布局的时候，经常出现一下情况:

这个元素高度怎么没了？
这两栏布局怎么没法自适应？
这两个元素的间距有问题

原因是元素之间相互的影响，导致了以上情况，这里就涉及到BFC了；

BFC全称是Block Formatting Context,即块级格式化上下文，是页面中的一块渲染区域，并且有一套自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置；
对于同一个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,inine-flex,grid,inline-grid;
position的值为absolute或者fixed;

三、应用场景

防止margin重叠（塌陷）：
```
<style>
    p {
        color:pink;
        margin:100px; 
      }
</style>

<body>
    <p>haha</p>
    <p>hehehe</p>
</body>
```
因为发生了margin重叠，所以两个p标签的margin值为100px,而不是200px；而且如果其中一个p标签的margin为90px，两个p标签margin值还是100px，以最大的为准；解决方法可以为：给其中的一个p标签外面添加一个div标签；再给这个div标签添加一个css样式,比如：overflow:hidden;即可解决；
```
<body>
    <div><p>haha</p></div>
    
    <p>hehehe</p>
</body>
```
清除内部浮动
```
<style>
·par {border: 5px solid #fcc;width: 300px;}

.child {border:5px solid #f66;width:100px;height: 100px;float: left;
</style>
<body>
<div class="par">
<div class="child"></div><div class="child"></div></div>
</body>
```
而 BFC 在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成 BFC，则内部浮动元素计算高度时候也会计算。
可以添加css样式：.par {overflow:hidden;}
自适应多栏布局：
```
<style>
.body {
width: 300px;
position: relative;
.aside {
width: 100px;height:150px;float: left;background: #f66;
.main {height:200px;background: #fcc;
</style>
<body>
<div class="aside"></div><div class="main"></div>
</body>
```
前面讲到，每个元素的左外边距与包含块的左边界相接触因此，虽然.aslide 为浮动元素，但是 main 的左边依然会与包含块的左边相接触而 BFC 的区域不会与浮动盒子重叠
所以我们可以通过触发 main 生成 BFC，以此适应两栏布局
.main
{
overflow:hidden;
}
这时候，新的 BFC不会与浮动的.aside 元素重叠。因此会根据包含块的宽度，和·aside 的宽度，自动变窄
效果如下:

余大侠在劈柴

关注

20
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
到底用对BFC了吗？

而且如果其中一个p标签的margin为90px，两个p标签margin值还是100px，以最大的为准；前面讲到，每个元素的左外边距与包含块的左边界相接触因此，虽然.aslide 为浮动元素，但是 main 的左边依然会与包含块的左边相接触而 BFC 的区域不会与浮动盒子重叠。而 BFC 在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成 BFC，则内部浮动元素计算高度时候也会计算。BFC目的是形成一个相对完全独立于外界的空间，让内部的子元素不会影响到外部的元素；
复制链接

扫一扫