BFC到底是什么？

最新推荐文章于 2024-08-12 16:19:20 发布

ZH_cainiao

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量125

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ZH_cainiao/article/details/114730280

版权

BFC到底是什么？

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。通过意思理解我可以看到BFC其实在CSS中是无处不在的东西，它是一个独立的个体，在BFC区域内的元素不会影响其他区域的元素，同时，其他区域的元素也不会影响BFC内元素的样式。
那BFC到底是怎么存在的？这需要我们了解如何我们在无形当中就创建了BFC。在MDN文档中这样定义了它的存在，如果元素有一下属性，证明该元素就自动创建了一个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 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
在 CSS中出现BFC的概念，我们是如何使用它的呢？到底有什么作用。我们所熟知的大概就以上几点，可以为我们页面布局起到非常好的作用。
首先，它可以解决外边距（margin）塌陷的问题。在两个div标签创建的盒子上，其外边距都为10px时，这时两个盒子相邻的上下边距发生了合并，相邻距离仅为10px，这就用到将原来相邻边距改为20px的BFC。我们可以在div盒子上设置一个父元素，并在父元素引入overflow:hidden的样式，即解决了外边距塌陷的问题。
第二，同时可以清楚浮动带来的一系列问题。我们先看一个例子：我们发现由于里面两个子元素浮动的关系，两个box已经脱离了父元素的包含块，父元素高度已经塌陷，我们需要让父元素包含两个box子元素，这样计算高度时，两个浮动子元素就会参与，所以我们要闭合浮动，触发父元素的BFC，我们还是继续用overflow:hidden。
第三，解决布局问题。在一下代码可以很好的看出效果：
代码：

<!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>
        html,body{
            width:100%;
            height: 100%;
        }
        .container{
            width: 600px;
            height: 200px;
            background-color: #ccc;
            overflow: hidden;
            margin: 0 auto;
        }
        aside{
            width:200px;
            height: 120px;
            background-color: cadetblue;
            float: left;
        }
        .main{
            /* margin-left: 200px; */
            height: 200px;
            background-color: coral;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="container">
        <aside></aside>
        <div class="main">
            ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        </div>
    </div>
</body>
</html>

在这里插入图片描述

右侧文字在超出左侧高度之后就会挤到左边去。
触发右侧容器的BFC后，右侧就是一个完全隔离开的容器，容器中的子元素绝对不会影响外面的元素，为了保证这个规则，触发了BFC的右侧元素为了将内部元素和左侧元素隔离开来，不得不形成这样左右完全隔离的两栏。
触发BFC：右侧display: flow-root;
在这里插入图片描述

ZH_cainiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC到底是什么？

BFC到底是什么？块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。通过意思理解我可以看到BFC其实在CSS中是无处不在的东西，它是一个独立的个体，在BFC区域内的元素不会影响其他区域的元素，同时，其他区域的元素也不会影响BFC内元素的样式。那BFC到底是怎么存在的？这需要我们了解如何我们在无形当中就创建了BFC。在MDN文档中这样定义了它的存在，如果元素有一下属性，证明该元
复制链接

扫一扫