BFC容器


theme: healer-readable highlight: a11y-light

前言

什么是BFC?

全称为Block Formatting Context ---- 块级格式化上下文

BFC布局规则

  • 内部的Box会在垂直方向,一个接一个地放置
  • BFC容器内部和外部相互隔离,互不影响---解决margin重叠问题
  • BFC容器内,在垂直方向上相邻元素的margin会重叠
  • BFC容器在计算高度时,浮动元素也参与计算 --- 清除浮动

触发BFC

  • ovflow:hidden || auto || overlay || scroll
  • float:left || right
  • position:absolute || fixed
  • display:inline-block
  • display:table-cell || table-xxx
  • diplay:flex || inline-flex

示例


<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .warp{
        height: 500px;
        background-color: aqua;
        margin-top: 100px;
    }
    .box{
        height: 200px;
        background-color: rgb(227, 246, 19);
        margin-top: 50px;
    }
</style>


<div class="warp">
    <div class="box"></div>
</div>

结果

这个结果有bug,box应该相对于warp向下移50px,这叫margin重叠

margin重叠只发生在上下,不发生在左右

内部的Box会在垂直方向,一个接一个地放置

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    ul{
        overflow: hidden;
    }
</style>


<div class="box">
<ul>
    <li style="width: 200px;height: 50px;background-color:aqua">1</li>
    <li style="width: 200px;height: 50px;background-color:rgb(240, 200, 25)">2</li>
</ul>
</div>

结果

image.png

设置了overflow: hidden;ul就会成为BFC容器,BFC容器里面的元素成一列排布,而弹性容器里面的元素成一行排布。

BFC容器内部和外部相互隔离,互不影响

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        overflow: hidden;
        margin-top: 100px;
    }
    li:nth-child(1) {
        margin-top: 50px;
    }
</style>


<div class="box">
<ul>
    <li style="width: 200px;height: 50px;background-color:aqua">1</li>
    <li style="width: 200px;height: 50px;background-color:rgb(240, 200, 25)">2</li>
</ul>
</div>

image.png li完全在ul内部里面

BFC容器内,在垂直方向上相邻元素的margin会重叠

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        overflow: hidden;
        margin-top: 100px;
        background-color: #eee;
    }
    li{
        display: inline-block;
    }
    li:nth-child(1) {
        margin: 30px;
    }
    li:nth-child(2) {
        margin: 30px;
    }
</style>


<div class="box">
<ul>
    <li style="width: 200px;height: 50px;background-color:aqua">1</li>
    <li style="width: 200px;height: 50px;background-color:rgb(240, 200, 25)">2</li>
</ul>
</div>

在左右方向上margin不会重叠

BFC容器在计算高度时,浮动元素也参与计算 --- 清除浮动

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    li{
        width: 200px;
        height: 50px;
        list-style: none;
        float: left;
    }
</style>


<ul>
<li style="background-color: aqua;">1</li>
<li style="background-color:rgb(23, 241, 74) ;">2</li>
<li style="background-color:rgb(207, 13, 13) ;">3</li>
</ul>

此时ul未触发BFC容器,没有高度

ul{
    overflow: hidden;
}
ul{
    float: left;
}

以上两种方式都可以触发BFC容器,此时ul便有了高度,计算该高度时,浮动元素也参与计算。

结语

大家可以试试其他触发BFC容器的方法

Thanks.jpg


这是一个从 https://juejin.cn/post/7368505674224418831 下的原始话题分离的讨论话题