BFC理解

最新推荐文章于 2024-02-09 11:34:15 发布

宇丨同学

最新推荐文章于 2024-02-09 11:34:15 发布

阅读量66

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/Lan_HaoYu/article/details/120187411

版权

1.什么是BFC？

BFC（Block Formatting Context），即块级格式化上下⽂，它是⻚⾯中的⼀块渲染区域，并且有⼀套属于⾃⼰的渲染规则：
- 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置
- 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的⾼度时，浮动⼦元素也参与计算
- BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然

BFC⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素

2.触发BFC的条件包含不限于：

浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

3.利⽤BFC的特性，我们将BFC应⽤在以下场景：

防⽌margin重叠（塌陷）

例子：

<!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>
        .div_top{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 30px;
        }
        .div_bottom{
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="div_top">我是盒子一</div>
    <div class="div_bottom">我是盒子二</div>
</body>
</html>

margin重叠俩盒子间距为50px 取俩个盒子间距的最大值

但是我们要的是俩个盒子的margin属性都起效果，就可以利用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>
        .div_top{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 30px;
        }
        .div_bottom{
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 50px;
        }
        .div_mid{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="div_top">我是盒子一</div>
    <div class="div_mid"></div>
    <div class="div_bottom">我是盒子二</div>
</body>
</html>

在俩个盒子中间在写个盒子触发BFC防止margin重叠

这样俩个盒子间距就是80px，俩个盒子的margin属性都起作用了

清除内部浮动

为什么清除内部浮动解决父级盒子高度为0问题影响页面布局

例如：

<!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>
        .content{
            border: 5px solid yellowgreen;
        }
        .div_top {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }

        .div_mid {
            width: 100px;
            height: 100px;
            background-color: gray;
            float: left;

        }

        .div_bottom {
            width: 150px;
            height: 150px;
            background-color: hotpink;
            float: left;

        }
    </style>
</head>

<body>
    <div class="content">
        <div class="div_top"></div>
        <div class="div_mid"></div>
        <div class="div_bottom"></div>
    </div>
</body>

</html>

当我们把盒子都浮动起来父级盒子高度就会为0

利用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>
        .content{
            border: 5px solid yellowgreen;
            overflow: hidden;
        }
        .div_top {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }

        .div_mid {
            width: 100px;
            height: 100px;
            background-color: gray;
            float: left;

        }

        .div_bottom {
            width: 150px;
            height: 150px;
            background-color: hotpink;
            float: left;

        }
    </style>
</head>

<body>
    <div class="content">
        <div class="div_top"></div>
        <div class="div_mid"></div>
        <div class="div_bottom"></div>
    </div>
</body>

</html>

父级盒子还会保留高度

自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: red;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: green;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

把right盒子触发BFC让left盒子不如之重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: red;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: green;
        text-align: center;
        line-height: 300px;
        overflow: hidden;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

总结

BFC是一块独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

宇丨同学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC理解

1.什么是BFC？BFC（Block Formatting Context），即块级格式化上下⽂，它是⻚⾯中的⼀块渲染区域，并且有⼀套属于⾃⼰的渲染规则： - 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置 - 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。 - 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此 - BFC的区域不会与float的元素区域重叠 - 计算BFC的⾼度时，浮动⼦元素也参与计算 - BFC就是⻚⾯上的⼀个隔离的独⽴容器，容
复制链接

扫一扫