CSS中的BFC BFC详解 BFC可以解决的问题汇总

最新推荐文章于 2023-04-16 18:03:18 发布

dccose

最新推荐文章于 2023-04-16 18:03:18 发布

阅读量523

点赞数 2

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/dccose/article/details/120595030

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS中的BFC BFC详解 BFC可以解决的问题汇总

简介

BFC 全称 Block Formatting Context，名为 "块级格式化上下文"它是CSS2.1规范定义的，是关于CSS渲染定位的一个概念.

W3C官方解释：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时， Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

触发开启BFC

可以创建BFC的CSS：
- html 根元素
- float:left
- float:right
- position:absolute
- position:fixed
- display:inline-block
- display:inline-flex
- display:inline-block
- display:flex
- display:grid
- display:inline-grid
- display:table
- display:table-cell
- display:table-caption
- display:flow-root 、、、、、、

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>
        .box {
            background: #008c8c;
            padding: 30px;
             /* overflow: hidden; */
        }
        .demo {
            width: 100px;
            height: 100px;
            background: lightcoral;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo">1</div>
        <div class="demo">2</div>
        <div class="demo">3</div>
        <div class="demo">4</div>
        <div class="demo">5</div>
        <div class="demo">6</div>
        <div class="demo">7</div>
        <div class="demo">8</div>
        <div class="demo">9</div>
        <div class="demo">10</div>
    </div>
</body>
</html>

解决外边距的合并问题

简述：两个元素同时设置了margin（外边距）但二者实际外边距，距离却为一方的最大值距离，而不是两者相加的距离。
父子级的两个元素设置了同向的外边距（同上和同下外边距）造成外边距合并
注意：父子级中水平margin不会被合并，垂直margin会被合并！

如下代码 father元素距上40px外边距但实际情况为60px 而本该距离父元素(father)上边距60px的子元素(son)实际情况为0px
解决办法：给父元素设置 overflow: hidden; 开启bfc
了解更多外边距合并问题：外边距合并重叠

在这里插入图片描述

<style>
         .father {
            width: 300px;
            height: 300px;
            margin-top: 40px;
            background: #d425cc;
             /* overflow: hidden; */
        }

        .son {
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background: #1eb3f8;

        }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

解决文字环绕问题

<!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>
        .container {
            width: 300px;
            height: 200px;
            background: pink;
        }
        .floatDiv {
            height: 50px;
            width: 80px;
            float: left;
            background: #2ee95c;
        }
        /* .strBfc {
            overflow: hidden;
        } */
    </style>
</head>
<body>
    <div class="container">
        <div class="floatDiv">
            floatDiv
        </div>
        <div class="strBfc">
            <p>
                Quae hic ut ab perferendis sit quod architecto,
                dolor debitis quam rem provident aspernatur tempora
                expedita.
            </p>
        </div>
    </div>
</body>

</html>

解决div浮动造成的遮盖问题

<!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>遮盖问题</title>
    <style>
        div {
            border: 5px solid lightcoral;
            box-sizing: border-box;
        }
        .box1 {
            width: 200px;
            height: 200px;
            margin-right: 10px;
            background: lightblue;
        }
        .box2 {
            width: 300px;
            height: 200px;
            background: lightgreen;
            /* overflow: hidden; */
        }
    </style>
</head>
<body>
    <div  class="box1">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero sequi at mollitia amet eaque voluptatibus ipsum
        tenetur ullam, reprehenderit ad.
    </div>
    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quasi eveniet recusandae praesentium perferendis,
        officiis dignissimos dicta. Consequuntur, fugit veniam?
    </div>
</body>
</html>

以上问题都是通过开启BFC得以解决，需要注意的是开启BFC的方式并非一种针对相应的问题使用对应的方法，其中不乏有些开启BFC的方法不适用于你当前处理的问题，这还需要自己逐一使用了解

dccose

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
CSS中的BFC BFC详解 BFC可以解决的问题汇总

BFC详解简介BFC 全称 Block Formatting Context，名为 "块级格式化上下文"它是CSS2.1规范定义的，是关于CSS渲染定位的一个概念.W3C官方解释：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时， Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。触发开启B
复制链接

扫一扫