BFC 最全解！

最新推荐文章于 2021-10-04 10:27:59 发布

明月挽我心

最新推荐文章于 2021-10-04 10:27:59 发布

阅读量139

点赞数

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/xxxxxii/article/details/120194056

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

概念

BFC，规定了内部的块级盒子模型如何布局。BFC是一个作用范围，可以理解为一个独立的容器，即这个容器的作用范围和外界是毫不相关的。所有同级或者嵌套的盒元素，他们属于一个bfc。

常见的创建BFC的方法

float属性不为none；
position不为static或者relative；
display为inline-block, table-cell, table-caption, flex, inline-flex；
overflow不为visible。

BFC布局规则

BFC是一个独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
内部的Box会在垂直方向，一个接一个地放置。
属于同一个BFC的两个相邻Box的margin会发生重叠。
在 BFC 中，每个盒的左外边缘都与其包含块的左边缘相接。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。（这个规则可用来清除内部浮动）。

BFC的作用

1.实现自适应两栏布局：

<style>
        body {
            width: 300px;
        }

        .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: red;
        }

        .main {
            height: 200px;
            background: pink;
            overflow: hidden;  //生成BFC，BFC的区域不会与float box重叠，所以实现自适应两栏布局
        }
    </style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>

2.清除浮动:因为子元素浮动了之后，父元素没有了高度，所以要清除浮动。
为什么 BFC 可以解决浮动问题呢？
答案就在 BFC 这个区域的独立特性上。因为独立，所以它要确保自己的作用范围不会对外界产生影响。此处我们把父元素创建为了一个 BFC，那么父元素就要保证自己的子元素不会跑出去给别人添麻烦，所以会自动把自己的宽高适应到能囊括子元素的程度。

<style>
        .par {
            border: 5px solid #fcc;
            overflow: hidden; //BFC能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算
        }
        .child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
    <div class="child"></div>
</div>

3.防止垂直margin重叠。
margin重叠包括：
兄弟元素之间的margin-top和margin-bottom重叠，父元素和第一个子元素的margin-top重叠，父元素和最后一个子元素的margin-bottom重叠。

原因：所有同级或者嵌套的盒元素，他们属于一个bfc，所以它们的margin会发生重叠
兄弟元素之间的重叠解决方法：

<style>
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
        .wrap {
            overflow: hidden;   //给p元素添加一个父元素，让它触发BFC。从而使两个p元素不属于同一个BFC。
        }
    </style>
</head>
<body>
    
<p>Haha</p>
<div class="wrap">
    <p>Hehe</p>
</div>
</body>

父子元素之间的margin重叠：

<style>
  #father{
  width:500px;
  height:500px;
  background:pink;
  margin:10px;
  }
  #son{
   width:200px;
   height:200px;
   background:gray;
   
   margin:10px;
  }
  </style>
 </head>
 <body>
  <div id="father">
  <div id="son"></div>
  </div>
 </body>

在这里插入图片描述
解决方法：为父元素添加overflow：hidden；这样子父元素成为一个独立的BFC,它的内部元素将不会影响bfc外部的元素。

明月挽我心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC 最全解！

概念BFC，规定了内部的块级盒子模型如何布局。BFC是一个作用范围，可以理解为一个独立的容器，即这个容器的作用范围和外界是毫不相关的。所有同级或者嵌套的盒元素，他们属于一个bfc。常见的创建BFC的方法float属性不为none；position不为static或者relative；display为inline-block, table-cell, table-caption, flex, inline-flex；overflow不为visible。BFC布局规则BFC是一个独立容器，
复制链接

扫一扫