BFC模式

139 阅读2分钟

首先BFC是什么?

这里BFC不是KFC,不是UFO,CPU,PTU

  • 所谓 BFC,指的是一个独立的布局环境,BFC 内部的元素布局与外部互不影响。
  • BFC 全称:Block Formatting Context, 名为 "块级格式化上下文"
  • BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。
  • BFC可以看做是一个CSS元素属性

如何触发BFC

触发BFC的css属性

  • overflow: hidden / auto / scroll
  • dispaly: inline-block / table-cell
  • 浮动
  • position: absolute / fixed / flex

BFC的规则

  • BFC就是一个块级元素,块级元素独占一行,向下一行一行的排列
  • BFC是一个独立的空间,空间内部元素和外部不受影响
  • 垂直方向的距离是由margin外边距来来控制,如果在同一个BFC环境下相邻的两个盒子的margin距离会重叠并且取最大值
  • BFC的高度由内容高度决定

用BFC解决了一些什么问题

盒子设置的浮动(float)脱离文档流,父盒子会产生高度塌陷问题,高度不计算

修改前

<!DOCTYPE html>
<html lang="en">

<head>
    <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>高度塌陷</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #fatherBox {
        margin: 100px;
        width: 300px;
        background-color: #000;
    }

    .son1Box {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }

    .son2Box {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
    }
</style>

<body>
    <div id="fatherBox">
        <div class="son1Box">sonBox1</div>
        <div class="son2Box">sonBox2</div>
    </div>
</body>
</html>

代码效果

image.png

可以看到上面效果给son1rBox、son2Box设置完float结果脱离文档流,使fatherBox高度没有被撑开,从而背景颜色没有颜色出来,解决此问题可以给fatherBox触发BFC,上面我们所说到的触发BFC属性都可以设置。

修改后

<!DOCTYPE html>
<html lang="en">

<head>
    <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>高度塌陷</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #fatherBox {
        margin: 100px;
        width: 300px;
        background-color: #000;
        // 触发BFC
        display:inline-block;
    }

    .son1Box {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }

    .son2Box {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
    }
</style>

<body>
    <div id="fatherBox">
        <div class="son1Box">sonBox1</div>
        <div class="son2Box">sonBox2</div>
    </div>
</body>
</html>

代码效果

image.png

margin边距重叠

修改前

<!DOCTYPE html>
<html lang="en">

<head>
    <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>margin边距重叠</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* margin边距重叠 */
    #fatherBox {
        margin: 100px;
        width: 300px;
        background-color: #000;
    }

    #fatherBox .son1Box,
    #fatherBox .son2Box {
        width: 100%;
        height: 200px;
        background-color: red;
    }

    .son1Box {
        margin-bottom: 10px;
    }

    .son2Box {
        margin-top: 20px;
    }
</style>

<body>
    <div id="fatherBox">
        <div class="son1Box">sonBox1</div>
        <div class="son2Box">sonBox2</div>
    </div>
</body>
</html>

代码效果

image.png

可以看到son1Box盒子设置margin-bottom属性值为10px,son2Box盒子设置margin-top属性值为20px,但是两个盒子之间的外边距只有20px。这就是margin边距发生了重叠并且取最大值做为边距值

修改后

<!DOCTYPE html>
<html lang="en">

<head>
    <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>margin边距重叠</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* margin边距重叠 */
    #fatherBox {
        margin: 100px;
        width: 300px;
        background-color: #000;
    }

    #fatherBox .son1Box,
    #fatherBox .son2Box {
        width: 100%;
        height: 200px;
        background-color: red;
        display: inline-block;
    }

    .son1Box {
        margin-bottom: 10px;
    }

    .son2Box {
        margin-top: 20px;
    }
</style>

<body>
    <div id="fatherBox">
        <div class="son1Box">sonBox1</div>
        <div class="son2Box">sonBox2</div>
    </div>
</body>
</html>

代码效果

image.png

经过将子盒子son1Box、son2Box样式中添加display: inline-block属性,由于只有块级元素才会有外边距,所以直接将子盒子改为行内块级元素就可以了

总结

多学习、多看报、少吃零食多睡觉

本文参考