【详解超全】BFC_IT分享知识网

大家好，欢迎来到IT知识分享网。

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的作用

解决当父级元素没有高度的时候，子级元素浮动会使父级元素高度塌陷的问题解决办法：在style样式的.continer类里面加上overflow: hidden;属性
```
<!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>
```
解决子级元素外边距会使父级元素塌陷的问题（另一种解决方案：将子级元素的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>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/134544.html

【详解超全】BFC

BFC是什么

BFC的四大特性

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

BFC的作用

原理

BFC的应用

相关推荐

发表回复