BFC记录

时间：2020-04-09 15:45:41 阅读：61 评论：0 收藏：0 [点我收藏+]

定义：

BFC（Block Formatting Context），块级格式化上下文，是一个独立的渲染区域。它规定了内部的块级元素的布局方式（垂直方向一个接一个），默认情况下只有根元素（即body）一个块级上下文。

哪些元素会产生BFC：

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

布局规则：

内部的块级元素会在垂直方向，一个接一个地放置；
块级元素间的垂直方向的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此；
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
计算BFC的高度时，浮动元素也参与计算（清除浮动）。

其中，对于BFC的区域不会与float box重叠的理解：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            
            

            .test {
                background-color: darkseagreen;
                /* overflow: hidden; */
                height: 100px;
            }
            .a {
                width: 50px;
                height: 50px;
                background-color: darkturquoise;
                float: left;
            }
   
        </style>
    </head>
    <body>
        <div class="a"></div>
        <div class="test"></div>
    </body>
</html>

不加overflow：hidden，结果

技术分享图片

加了后：

技术分享图片

overflow：hidden清除浮动就是BFC，BFC可以包含浮动，在计算爸爸高度时会把浮动的儿子算进去。

BFC记录

原文：https://www.cnblogs.com/martin-tong/p/12667242.html

踩

(1)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)