Sikara

18 BFC的理解及作用

18 BFC的理解及作用

理解

块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。一句话：保证各个盒子之间的布局样式互不影响

从一个现象开始说起

一个盒子不设置height。当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC

如何创建BFC

方法①:float的值不是none

方法②: position的值不是static或者relative

方法③: display的值是inline-block、flex或者inline-flex

方法④:overflow:hidden;

BFC的其他作用

BFC可以取消盒子margin塌陷
BFC可以可以阻止元素被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            /*float: left;*/
            /*position: absolute;*/
            /*a从块级元素变成行内元素*/
            /*display: inline-block;*/
            overflow: hidden;/*最佳不影响外部元素*/
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .b-last{
            width: 100px;
            height: 200px;
            background-color: greenyellow;
            /*浮动元素会脱离文档流，不写b-last会走到b的前面*/
            overflow:hidden;
        }
        .c{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            overflow: hidden;
        }
        .d{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<!--父节点继承子节点高度-->
<!--<div class="a">-->
<!--    <div class="b"></div>-->
<!--    <div class="b"></div>-->
<!--    <div class="b"></div>-->
<!--</div>-->
<!--<a href="">ssssssssssssss</a>-->
<!--<a href="">ssssssssssssss</a>-->
<!--<a href="">ssssssssssssss</a>-->
<!--<a href="">ssssssssssssss</a>-->
<!--<a href="">ssssssssssssss</a>-->
<!--<ol>-->
<!--    <li>szfc</li>-->
<!--    <li>szfc</li>-->
<!--    <li>szfc</li>-->
<!--    <li>szfc</li>-->
<!--    <li>szfc</li>-->
<!--</ol>-->
<hr>
<!--margin高度塌陷-->
<div class="c">
    <div class="d"></div>
</div>
<hr>
    
<!--阻止覆盖-->
<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b-last"></div>
</div>
</body>
<script>

</script>
</html>

Sikara

© 2025 Sikara