浅谈BFC(Block Formatting Context,块格式化上下文）

2022-04-26 317 阅读1分钟

前言

在平时所写的项目里，可能会碰到类似的css问题，就是类似于子盒子不能去撑大父盒子的问题

创建格式化上下文常见方式

根元素（html）
浮动元素（元素的float不是none）
绝对定位元素（元素的position为absolute或fixed） - 行内块元素（元素的display为inline-block）
表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
表格标题（元素的display为table-caption，HTML表格标题默认为该值）
overflow计算值（Computed)不为visible的块元素
display的值为flow——root的元素
contain的值为layout、content或paint的元素
弹性元素（display为flex或inline-flex元素的直接子元素）
网格元素（display为grid或inline-grid元素直接子元素）

需要使用BFC的实例：

在子元素添加浮动的样式时，子元素会脱离标准，而不会去撑大父元素的高度：

<body>
<div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div
</body>


<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
} 
</style>

在父元素样式添加overflow:atuo或者display：flow-root即可解决：

<style>
.box {
   background-color: rgb(224, 206, 247);
   border: 5px solid rebeccapurple;
    display: flow-root;
}

.float {
   float: left;
   width: 200px;
   height: 150px;
   background-color: white;
   border:1px solid black;
   padding: 10px;
} 
</style>

外边距塌陷问题

创建新的BFC避免可以两个相邻<div>之间的外边距合并问题。

友情链接：