一天搞定CSS：BFC布局与普通文档流布局比较--15

最新推荐文章于 2024-02-26 17:21:54 发布

Java仗剑走天涯

最新推荐文章于 2024-02-26 17:21:54 发布

阅读量1k

点赞数 1

分类专栏：前端基础HTML5/CSS3 文章标签： css 布局 BFC 普通文档流布局 BFC布局

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71634396

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

BFC:Block Formatting Contexts–块级元素格式化上下文

1.BFC定义

它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用

关键词解释：
块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其它元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

2.BFC触发方式

这里写图片描述

2.BFC的布局规则

这里写图片描述

3.普通文档流布局规则

这里写图片描述

4.代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            触发BFC的方式（以下任意一条就可以）
                1、float的值不为none
                2、overflow的值不为visible
                3、display的值为table-cell、table-caption和inline-block之一
                4、position的值不为static或者releative中任何一个


            普通文档流的布局规则
                1、浮动的元素是不会被父级计算高度
                2、非浮动元素会覆盖浮动元素的位置
                3、margin会传递给父级
                4、两个相邻的元素上下margin会重叠

            BFC的布局规则
                1、浮动的元素会被父级计算高度(父级触发了BFC)
                2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
                3、margin不会传递给父级（父级触发了BFC）
                4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发了BFC）
        -->

        <!--
            1、浮动的元素会被父级计算高度(父级触发了BFC)    使用display不为none触发BFC
        -->
        <div style="border: 1px solid #f00; display: inline-block;">
            <div style="width: 100px; height: 100px; background: green; float: left;">div1----</div>
        </div>

        <!--
            2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）  使用overflow不为visible触发BFC
        -->
        <div style="border: 1px solid #f00; margin-top: 100px;">
            <div style="width: 100px; height: 100px; background: green; float: left;">kaivon1</div>
            <div style="width: 100px; height: 100px; background: red; overflow: hidden;">kaivon2</div>
        </div>

        <!--
            3、margin不会传递给父级（父级触发了BFC）    使用overflow不为visible触发BFC    
        -->
        <div style="background: blue; margin-top: 100px; overflow: hidden;">
            <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">kaivon1</div>
            <div style="width: 100px; height: 100px; background: red;">kaivon2</div>
        </div>

        <!--
            4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发了BFC）  使用overflow不为visible触发BFC
        -->
        <div style="margin-top: 100px;">
            <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">kaivon1</div>
            <div style="overflow: hidden;">
                <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">kaivon2</div>
            </div>
        </div>
    </body>
</html>