BFC的深入理解

最新推荐文章于 2024-07-08 16:02:09 发布

编程小飞

最新推荐文章于 2024-07-08 16:02:09 发布

阅读量218

点赞数

文章标签： css BFC

本文链接：https://blog.csdn.net/qq_44606064/article/details/116430325

版权

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC的方式

只要元素满足下面任一条件即可触发 BFC 特性：

浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

上面是比较官方的说法，下面通过具体例子详细说明

案例一：BFC解决外边距重叠问题

<style>
  .box{
      width: 100%;
      height: 100vh;
      background-color: violet;
  }
  .inner1,.inner2{
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .inner2{
      background-color: red;
  }
</style>
<body>
   <div class="box">
       <div class="inner1"></div>
       <div class="inner2"></div>
   </div>
</body>

在这里插入图片描述
先在一个容器中设置两个div，目前的效果是这样的，接下来增加一个外边距。

<style>
  .inner1,.inner2{
    width: 100px;
    height: 100px;
    background-color: green;
     /* 增加外边距 */
    margin: 100px auto;
  }
</style>

在这里插入图片描述
第一个问题出现的原因就是父容器和子容器发生了外边距重叠，这时我们开启box元素的BFC，增加下面的代码

.box{
      width: 100%;
      height: 100vh;
      background-color: violet;
      /*下面两个任选其一*/
      /* position: absolute; */
      overflow: hidden;
  }

在这里插入图片描述
这样就解决了父容器和子元素的外边距重叠问题，可是子元素的上下边距还是重叠的。我们将这两个子元素放到不同的BFC容器中，这样它们的边距就不会受到干扰。来看下面代码

.innercontainer{
      overflow: hidden;
  }
<div class="box">
       <div class="innercontainer">
            <div class="inner1"></div>
       </div>
       <div class="innercontainer">
            <div class="inner2"></div>
       </div>
 </div>

在这里插入图片描述
这样就是我们想要的效果了。

案例二：BFC解决高度塌陷

<style>
  .box{
      border: red 1px solid;
  }
  .inner1{
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>
<body>
   <div class="box">
        <div class="inner1"></div>
   </div>
</body>

下面的效果
在这里插入图片描述
我们设置子元素浮动

.inner1{
    width: 100px;
    height: 100px;
    background-color: green;
    float: right;
  }

在这里插入图片描述
结果就变成这样了，这就是由于子元素浮动造成父元素的高度塌陷，这时就可以用BFC,开启父元素的BFC,

 .box{
      border: red 1px solid;
      overflow: hidden;
  }

在这里插入图片描述
这样就解决了高度塌陷的问题。

案例三：BFC解决浮动元素被覆盖问题

<style>
  .box{
      border: red 1px solid;
  }
  .inner2{
    width: 200px;
    height: 200px;
    background-color: green;
  }
  .inner1{
      width: 100px;
      height: 100px;
      background-color: rosybrown;
      float: left;
   
  }
</style>
<body>
   <div class="box">
        <div class="inner1">我是向左浮动的块元素</div>
        <div class="inner2">我是inner2，我是一个正常显示的块元素，高度和宽度都是100px</div>
   </div>
</body>

在这里插入图片描述

这时开启inner的BFC之后

.inner2{
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
  }

在这里插入图片描述

编程小飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫