谈谈对BFC的理解（面试题）

⁡⁢⁡⁢⁠Ac

已于 2023-04-20 21:23:25 修改

阅读量38

点赞数

分类专栏： 2023暑期面试文章标签： css css3 html

于 2023-03-31 17:06:17 首次发布

本文链接：https://blog.csdn.net/weixin_53261137/article/details/129884380

版权

2023暑期面试专栏收录该内容

16 篇文章 1 订阅

订阅专栏

谈谈对BFC的理解（面试题）

什么是BFC？

BFC是块级格式上下文，是一个独立的空间，里面的子元素的渲染不受外部的影响

BFC的作用有那些？

消除margin塌陷
清除浮动问题

触发BFC条件有哪些？

overflow：hidden
display：inline-block / flex / table-cell
position: absolute / flex

消除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>BFC-1</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    section{
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 50px;
    }

    .box{
        overflow: hidden;
    }
</style>
<body>
    <div class="box">
        <section>section1</section>
    </div>
    <section>section2</section>
</body>
</html>

清除浮动（代码展示）

<!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>BFC-2</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    section {
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 20px;
    }

    .box {
        /* 方法一 */
        overflow: hidden;
        /* 方法二 */
        /* display: inline-block;  */
        /* 方法三 */
        /* position: absolute; */
        background: black;
    }

    .left{
        float: left;
    }

    .right{
        float: right;
    }
</style>

<body>
    <div class="box">
        <section class="left">left</section>
        <section class="right">right</section>
    </div>
</body>
</html>