01_BFC是什么，这篇文章主要讲的是CSS重合问题

最新推荐文章于 2025-08-17 15:24:04 发布

floret. 小花

最新推荐文章于 2025-08-17 15:24:04 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： # 面试文章标签： css html css3

本文链接：https://blog.csdn.net/heiioworld_/article/details/128320626

面试专栏收录该内容

3 篇文章

订阅专栏

    <style>
        .container{
            overflow: hidden;
            /*display: table-caption;*/
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            margin-bottom: 20px;
            background-color: orange;
        }
        .box2{
            margin-top: 20px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box box1"></div>
</div>
<div class="container">
    <div class="box box2"></div>
</div>


<!--// BFC是什么？怎么触发？解决的是什么问题-->
<!--// 1.普通流：-->

<!--//2.定位流：-->

<!--//3.浮动流：-->
<!--块级元素格式化上下文：-->
<!--block formatting content;-->

<!--//指的就是被隔离的区间;(子元素不会被外面的元素产生影响)；-->

<!--开启BFC的方式-->
<!--body:BFC元素;-->
<!--float:left | right;-->
<!--overflow:hidden | scroll | auto;不是visible;-->
<!--display:inline-block | table-cell | table-caption | flex | grid;(非none非inline非block)-->
<!--position:absolute | fixed | 非 relative-->
<script>
    //1.margin 重合
</script>
</body>