BFC

最新推荐文章于 2023-02-02 16:52:42 发布

小白搬运

最新推荐文章于 2023-02-02 16:52:42 发布

阅读量146

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_41723305/article/details/110850693

版权

js 专栏收录该内容

14 篇文章

订阅专栏

简介

我们常说的文档流其实分为定位流、浮动流、普通流三种。
而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。
BFC(块格式化上下文)，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

如何创建BFC：

根元素（）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、
table-row-group、table-header-group、table-footer-group（分别是HTML
table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC可以做什么

防止外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blue, .red-inner{
            height: 50px;
            margin:10px 0;
        }
        .blue{
            background-color: blue;
        }
        .red-inner{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="blue"></div>
    <div class="red-inner"></div>
</body>
</html>

在这里插入图片描述
在这里我们给两个div上下外边距都给了10px,主要是在边距发生了合并
这时如果我没任意一个div加一个父div，并且为改元素创建BFC就不会发生内外边距合并情况

//css
 .red-outer{
            overflow: hidden;
        }
//html
<div class="red-outer">
        <div class="red-inner"></div>
    </div>

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            border: 1px solid #333333;
        }
        .inner{
            float: left;
            height: 50px;
            width: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

当全部的子元素都脱离文档流的时候，父元素的高变为了0，所以出现了以上情况
我们可以使用常用方法伪元素清除浮动

.outer::after{
            content: "";
            display: block;
            clear: both;
        }

也可以使用BFC方式清除浮动

.outer{
            overflow: hidden;
        }

防止文字环绕

如果是想要的效果，左边列为一个小框，右边为一段文字，这个实现可以有很多种方法，现在我们就说一下利用bfc实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            width: 50px;
            height: 50px;
            background-color: rosybrown;
            float: left;
            margin: 10px;
        }
        .right{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">文字内容</div>
    </div>
</body>
</html>