CSS中BFC详解

Mr.一

已于 2023-12-14 20:53:08 修改

阅读量59

点赞数

分类专栏：前端文章标签： css

于 2023-12-10 23:22:20 首次发布

原文链接：https://blog.csdn.net/weixin_57677300/article/details/129046793

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

概念

BFC，即“块级格式化上下文”（Block Formatting Context），可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。

特性

1. 每一个BFC区域只包含其子元素，不包含其子元素的子元素

2. 每一个BFC区域相互独立，互不影响

触发条件

1. 根元素(<html>)
 
2. 设置float浮动，不包含none
 
3. 绝对定位元素 (元素的 position 为 absolute 或 fixed)
 
4. display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex
 
5. 设置overflow, 值不为visible
 
6. contain 值为 layout、content 或 paint 的元素

BFC的作用

1. 避免外边距重叠

.box {
     width: 200px;
     height: 200px;
     background: #5aa878;
     margin: 100px;
    }
 
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>

结果上间距为100px的，这不是bug,而是一种规范。块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距。

解决方法

.box{
      width: 200px;
      height: 200px;
      background: #5aa878;
      margin: 100px;
     }
.container{
      overflow: hidden;
     }
 
 
<div class='container'>
    <div class="box"></div>
</div>
<div class="container">
    <div class="box"></div>
</div>

给这两个box给各自一个div包裹，然后给这个div添加 overflow: hidden;属性触发container的BFC

2. 清除浮动

.container{
    border: 2px solid yellowgreen;
}
.content{
    width: 100px;
    height: 100px;
    background: #47cabf;
    margin: 100px;
    float: left;
}
 
<div class="container">
    <div class="content"></div>
</div>

给子元素添加了浮动导致子元素脱离了文档流，所以父盒子只剩下2px的边框,并没有将子盒子包住

解决方法:

给父容器添加BFC属性，添加overflow: hidden;属性触发BFC。这样就起到清除浮动的效果。

3. 防止元素被浮动元素覆盖

.box1{
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    background: red;
}
 
<div class="box1"></div>
<div class="box2"></div>

结果浮动的元素覆盖了没有添加浮动的元素

解决方法:

给第二个元素添加overflow: hidden;属性，触发BFC, 这样这两个属性就互不干扰。

4. 防止父子元素外边距塌陷

.box1{
    width: 200px;
    height: 200px;
    background: blue;
}
.box2{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 20px;
}
 
<div class="box1">
   <div class="box2"></div>
</div>

按理说是子盒子距离父盒子顶部20px, 而实际是父盒子向下移动20px.这就是边距塌陷

解决方法:

给父盒子添加overflow: hidden;属性，触发BFC即可

Mr.一

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中BFC详解

块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距。给这两个box给各自一个div包裹，然后给这个div添加 overflow: hidden;给父容器添加BFC属性，添加overflow: hidden;属性，触发BFC, 这样这两个属性就互不干扰。给子元素添加了浮动导致子元素脱离了文档流，所以父盒子只剩下2px的边框,并没有将子盒子包住。给父盒子添加overflow: hidden;属性，触发BFC即可。
复制链接

扫一扫