【详解超全】BFC

最新推荐文章于 2024-07-26 08:00:00 发布

195.

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量724

点赞数 24

文章标签： css css3 html

本文链接：https://blog.csdn.net/2303_76567022/article/details/137125798

版权

BFC是什么

BFC的全称为Block formatting Context，意思是块级格式化上下文。

我们可以把BFC看成一个容器，容器里面的元素不会影响到元素外部的元素。简单来说就是创建了一个独立的布局环境。

BFC的四大特性

BFC是一个块级元素，块级元素的特性是在垂直方向上依次排列。
有独立的布局环境（上面部分有提到）。
属于同一个BFC的两个盒子，外边距margin会发生重叠，这时候会取大的margin进行实际显示。（这里我们举一个简单的例子：假设盒子A和盒子B存在于同一个BFC里，垂直方向排列，A盒子位于B盒子的上面，这是A盒子的下外边距为20px，B盒子的上外边距为30px，而实际的效果是A盒子和B盒子的垂直距离只有30px）
当我们计算BFC的高度时，浮动元素也要参与计算。

我们如何创建以及触发BFC（常用的方式）

overflow: hidden; //对溢出元素进行隐藏
display: flex; //将容器变为弹性的容器，进行相关设置，根据弹性布局拉伸和排列
display: inline-flex; //内联的弹性盒子，不会占据整行
display: inline-block; //内联块级元素，可以在同一行内显示，同时保持块级元素的特性
position: absolute; //绝对定位，根据父类或者body确定位置，不再占用位置
position: fixed; //某个窗口中的固定定位

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>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .continer {
            width: 900px;
            background: black;
        }

        .boxA {
            height: 200px;
            width: 200px;
            background: red;
            float: left;
        }

        .boxB {
            height: 200px;
            width: 200px;
            background: blue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="continer">
        <div class="boxA"></div>
        <div class="boxB"></div>
    </div>
</body>

</html>

解决办法：在style样式的.continer类里面加上overflow: hidden;属性

解决子级元素外边距会使父级元素塌陷的问题（另一种解决方案：将子级元素的margin-top改为父级元素的padding-top来解决）

<!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>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .continer{
            width: 200px;
            height: 200px;
            background: green;
        }

        .box{
            margin-top: 20px;
            height: 50px;
            width: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box"></div>
    </div>
</body>
</html>

解决办法：在style样式的.continer类里面加上overflow: hidden;属性

原理

BFC 是 CSS 中的一个概念，它决定了如何渲染块级盒子，并且规定了内部盒子如何与 BFC 外部的盒子及其他元素交互。具体到解决父元素高度塌陷问题上，设置 overflow: hidden; 会创建一个新的 BFC，从而改变元素的布局规则，使得父元素可以包含其内部浮动元素，进而避免高度塌陷问题的发生。

当父元素的 overflow 属性被设置为 hidden 时，它会创建一个新的 BFC，这样父元素就能够包含其内部浮动元素，不再受浮动元素影响而导致高度塌陷。这种方法常被用来清除浮动带来的布局问题。

注意：属于同一个BFC的相邻块级元素才会发生margin合并的问题。

BFC的应用

自适应两栏、三栏的布局

<style>
* {
padding:0px;
margin:0px;
}
.left {
width:200px;
height:100px;
background:green;
float: left;
}
.right {
height:200px;
background:red;
overflow: hidden; 
}
</style>
<div class="left"></div>
<div class="right"></div>

清除内部浮动

<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    ul {
        background: green;
        overflow: hidden;
    }
    li {
        width: 100px;
        height: 20px;
        background: red;
        float: left;
    }
</style>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

利用BFC消除margin重叠

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    p {
        width: 100px;
        height: 20px;
        background: red;
        margin: 10px 0px;
    }
</style>
<div style="overflow:hidden;">
    <p>盒子1</p>
</div>
<p>盒子2</p>