谈谈我对bfc的理解

最新推荐文章于 2024-03-06 09:10:11 发布

大勺孙喜贵

最新推荐文章于 2024-03-06 09:10:11 发布

阅读量949

点赞数 2

分类专栏： bfc 文章标签： bfc-清除浮动

本文链接：https://blog.csdn.net/qq_36846234/article/details/78890468

版权

bfc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对于有过CSS基础的童鞋，想必都遇到过清除元素浮动、margin值重叠的问题吧，这些问题网上有N种解决方案，但是拿到方案的你，有没有想探究一下它的原理呢？

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

说了这么多，你肯定还是一头雾水，我也不喜欢这种理论的定义，可是偏偏它说的还很有道理。所以我们要另辟蹊径来理解呀【只要外面有一层bfc佛光照着，里面的小妖怪再怎么上天入地的折腾，都不会影响人间的和平】，哈哈哈哈哈，接下来上几个案例你就晓得噶

在上案例之前，我们还是需要在了解BFC是如何生成的

BFC的生成条件

float值不为none
overflow的值不为visible
display的值为inline-block/table-cell/table-caption/table
position的值为absolute/fixed

BFC 在布局中的应用

1⃣️防止margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .one{
            width:100px;
            height:100px;
            background-color: darkgreen;
            margin:10px;
        }
        .two{
            width:100px;
            height:100px;
            background-color: darkred;
            margin:10px;
        }
    </style>
</head>
<body>
    <div>
        <div class="one">1</div>
        <div class="two">2</div>
    </div>
</body>
</html>

由此我们发现两个同级的块级盒子在垂直方向上margin值发生了重叠，
那么我们可以使用bfc 大法清除margin重叠这个小妖精，对比一下代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            overflow: hidden;
        }
        .one{
            width:100px;
            height:100px;
            background-color: darkgreen;
            margin:10px;
        }
        .two{
            width:100px;
            height:100px;
            background-color: darkred;
            margin:10px;
        }
    </style>
</head>
<body>
    <div>
        <div class="one">1</div>
        <div class="father">
            <div class="two">2</div>
        </div>

    </div>
</body>
</html>

这里写图片描述
啦啦啦啦啦，看垂直方向上的margin值是不是都起作用啦，bfc大法好啊，当然也不一定只有设置overflow:hidden这一种方法，我只是给大家做一个小演示，只要满足BFC的生成条件都可以实现。
2⃣️清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .one{
            width:100px;
            height:100px;
            background-color: darkgreen;
            float:left;
        }
        .two{
            width:200px;
            height:200px;
            background-color: darkred;
        }
    </style>
</head>
<body>
    <div>
        <div class="one">1</div>
        <div class="two">2</div>
    </div>
</body>
</html>

结果如下：
这里写图片描述
这个浮动该怎么破呢？BFC来拯救你了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            display: inline-block;
        }
        .one{
            width:100px;
            height:100px;
            background-color: darkgreen;
            float:left;
        }
        .two{
            width:200px;
            height:200px;
            background-color: darkred;
        }
    </style>
</head>
<body>
    <div>
        <div class="one">1</div>
        <div class="father">
            <div class="two">2</div>
        </div>
    </div>
</body>
</html>

结果如下：这里写图片描述

总结：想要继续深入了解的小伙伴，可以去看看相应的CSS布局规则，像《CSS设计指南》、《CSS权威指南》这些都很不错，我正在学习的路上，大家一起努力呀

另外我在写这篇文章的时候，看到一篇不错的BFC文章，大家也可以看看，链接放在此处了【http://www.cnblogs.com/dojo-lzz/p/3999013.html#undefined】

大勺孙喜贵

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
谈谈我对bfc的理解

对于有过CSS基础的童鞋，想必都遇到过清除元素浮动、margin值重叠的问题吧，这些问题网上有N种解决方案，但是拿到方案的你，有没有想探究一下它的原理呢？BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。说了这么多，你肯定还是一头雾水，我也不喜欢这种理论的定义，可是偏偏它说的还很有道理。所以
复制链接

扫一扫