Html布局 BFC的概念和作用讲解

最新推荐文章于 2024-06-14 08:20:46 发布

瑞雨溪

最新推荐文章于 2024-06-14 08:20:46 发布

阅读量242

点赞数 5

分类专栏： HTML基础文章标签： html 前端

本文链接：https://blog.csdn.net/m0_57301042/article/details/127793879

版权

HTML基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BFC的概念

BFC的作用

把元素变成BFC元素的方法

BFC的概念

BFC是Web页面的可视CSS渲染的一部分，我们可以认为BFC是一个封闭的大箱子，无论箱子内部的元素如何变动，都不会影响到外部。

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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 600px;
      background: #000;
    }
    .box2 {
      margin-top: 100px;
      height: 300px;
    }
  </style>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

效果如图

我们发现我们给里面的div加了上边距应该让他在大div里向下移动，而结果是都往下移了100px相当于给外面的div加了上边距，造成这个问题的原因就是我们外面的div没有闭合，导致上边距溢出，所以就出现了上面这种情况。

解决办法就是将外面的div变成BFC元素，也就是把他闭合起来。

把元素变成BFC元素的方法

float的属性不为none。
position的属性为absolute，fixed。
overflow的属性不为visible。

通过伪元素

.box1::after,
.box1::before {
   content: '';
   display: table;
 }
.box1::after {
   clear: both;
}

当我满足以上任意条件时，外面的div就会变成一个BFC元素，效果如图

大家可以看到外面的div上边距已经没有了，因为里面的div背景颜色也为黑色，下面我进行修改

可以看到里面的div上边距已经给上了，所以这就是BFC的作用，可以让一个元素封闭起来，让里面的元素不会影响外面的元素从而进行更好的布局。BFC一般与浮动相使用来布局，我将会在之后更新浮动的一些文章。

瑞雨溪

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html布局 BFC的概念和作用讲解

HTML布局 BFC的概念及作用
复制链接

扫一扫

专栏目录

Html布局 BFC的概念和作用讲解

BFC的概念

BFC的作用

把元素变成BFC元素的方法

“相关推荐”对你有帮助么？