什么是BFC，如何触发BFC,BFC的作用

最新推荐文章于 2024-02-26 17:21:54 发布

Ne￡

最新推荐文章于 2024-02-26 17:21:54 发布

阅读量2.9k

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45549737/article/details/124264991

版权

BFC：块级格式化上下文

理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

BFC的布局规则

一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边，与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

BFC的特性与作用

1、可以避免外边距重叠

:如下外边距重叠

<!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>
    <style>
        .one,
        .two{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px;
        }

    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

本应该上面div的margin-bottom和下面div的margin-top都为100px，呈现200px的外边距，但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠。

解决方式：

    把两个div包裹在两个不同container容器中，用over-hidden触发container的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>
    <style>
        .one,
        .two{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px;
        }
        .container{
                    overflow: hidden;
                }
    </style>
</head>
<body>
    <div class="container">
        <div class="one"></div>
    </div>
    <div class="container">
        <div class="two"></div>
    </div>
</body>
</html>

2、清除浮动

    正常我们希望的是看到一圈红色边框包裹着一个黄方块，但是父元素失去了高度支撑；因为我们添加了浮动，使得子元素脱离了文档流，所以只剩下20px边距高度，同样，我们可以通过overflow属性触发父容器的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>
    <style>
        .parent {
            border: 10px solid red; 
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

给父元素设置：触发BFC清除浮动

.parent{
    border: 10px solid red;
    overflow: hidden;
}

3、阻止元素被浮动元素覆盖

    给一个元素添加浮动属性，覆盖了另一个元素；如果不要覆盖，触发被覆盖元素的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>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

解决方法：触发BFC

 .two{
	width: 200px;
	height: 200px;
	background-color: red;
	overflow: hidden;
}

哪些元素或属性能触发BFC

根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex,inline-flex
overflow不为visible

Ne￡

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
什么是BFC，如何触发BFC,BFC的作用

BFC：块级格式化上下文理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.BFC的布局规则一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边，与包含块border box的左边相接触四、BFC的区域不会
复制链接

扫一扫