搞懂BFC

最新推荐文章于 2024-05-08 22:33:14 发布

qq_38253873

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量102

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/qq_38253873/article/details/105105608

版权

什么是BFC

Block Formatting Contexts（BFC）块级元素格式化上下文
它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

块级元素：父级（是一个块元素）
内容：子元素（是一个块元素）
其他元素：与内容同级别的兄弟元素
相互作用：BFC里的元素与外面的元素不会发生影响

常用触发条件

浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）
body根元素
其他可以参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC布局与普通文档流布局区别

普通文档流布局规则

浮动元素不会计算为父元素的高度
非浮动元素会覆盖浮动元素
子元素的margin会传递给父元素
两个相邻元素上下margin会重叠

BFC布局规则

浮动的元素会被父级计算高度（父级触发了BFC）
非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
margin不会传递给父级（父级触发了BFC）
两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

具体演示

第一点

当我们给子元素增加了浮动后，发现父容器消失了，这就是所谓的高度塌陷。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .parent{
            background: red;

        }
        .son{
            background: green;
            width: 100px;
            height: 100px;
            float:right;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>
</html>

发现父容器消失了
但是当我们给父元素加上一些样式，改变position或者overflow

.parent{
            background: red;
            overflow:hidden;
            /*position: absolute;*/
        }

在这里插入图片描述
父元素的高度就出现了

第二点

在正常情况浮动元素会遮住不浮动元素部分内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .parent{
            background: red;
            /*position: absolute;*/
        }
        .son{
            background: green;
            width: 100px;
            height: 100px;
            float:left;
        }
        .son2{
            background: hotpink;
            width: 300px;
            height: 100px;

        }
    </style>
</head>
<body>
<div class="parent">
    <div class="son"></div>
    <div class="son2"></div>
</div>
</body>
</html>

在这里插入图片描述
让不浮动元素开启BFC后，互不影响

第三点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .parent{
            background: red;
            /*position: absolute;*/
        }
        .son{
            background: green;
            width: 100px;
            height: 100px;
            margin-top:100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述
特别的：当父元素和子元素都设置了同一方向margin的时候，显示效果呈现大的那个

当修改父元素为BFC后，效果如下
在这里插入图片描述

第四点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .parent{
            background: red;
            overflow: hidden;
            width: 100px;
            height: 100px;
            margin-bottom:100px;
        }
        .parent2{
            background: green;
            width: 100px;
            height: 100px;
            margin-top:100px;
        }
    </style>
</head>
<body>
<div class="parent">
</div>
<div class="parent2">
</div>
</body>
</html>

按照效果，我们希望有200px的margin距离，可是只有100px，这就是外边距重叠
在这里插入图片描述
将parent2放入一个BFC的父容器后，margin成功展示

创建BFC无副作用方法

使用display: flow-root 一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display:
flow-root 可以创建新的BFC。

qq_38253873

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搞懂BFC

什么是BFCBlock Formatting Contexts（BFC）块级元素格式化上下文它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系块级元素：父级（是一个块元素）内容：子元素（是一个块元素）其他元素：与内容同级别的兄弟元素相互作用：BFC里的元素与外面的元素不会发生影响常用触发条件浮动元素：float除none以外的值绝对定位元素：pos...
复制链接

扫一扫