css里的BFC用法

stefanieliang 发布于2019-08-30 10:51 / 1804人阅读

摘要：里的用法，可以把理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。规则内部的盒子会在垂直方向，一个个地放置。

css里的BFC用法

BFC(Block Formatting Contexts)，可以把BFC理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。

规则

1.内部的盒子会在垂直方向，一个个地放置。

2.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

3.属于同一个BFC的两个相邻BOx的上下margin会发生重叠

4.计算BFC的高度时，浮动元素也参与计算

5.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

6.BFC的区域不会与float重叠；

哪些元素会触发BFC

1.body根元素

2.浮动元素：float不为none的属性值；

3.绝对定位元素：position（absolute、fixed）

4.display为：inline-block、table-cell、flex

5.overflow除了visible以外的值（hidden、auto、scroll）

BFC的应用

1.解决margin重叠问题

2.解决浮动高度塌陷问题

3.解决侵占浮动元素的问题

例：

1.margin重叠问题

我们先定义两个垂直的div

css

    .box{
            width: 200px;
            height: 50px;
            margin: 30px 0;
            background: black;
        }

margin重叠后的效果

这满足规则第三条：
属于同一个BFC的两个相邻BOx的上下margin会发生重叠
说明两者属于同一个BFC，所以我们将两个div放到不同的BFC中，为第二个div套上一个父元素，然后通过设置overflow hidden来激活BFC

css

     .content{
            overflow: hidden;
        }

效果图为：

**再来看看浮动高度塌陷问题
**

css

      .content{
            width:300px; 
            border:1px solid black; 
        }

        .content .box{
            width:100px;
            height:100px;
            border:1px solid red;   
            float:left;
        }

效果图为：

能够看到父元素没有被撑开，BFC规则第四条：
计算BFC的高度时，浮动元素也参与计算
所以我们要将父元素触发BFC

    .content{
            width:300px; 
            border:1px solid black; 

            overflow: hidden;
        }

效果图为：

能都看到父元素已经撑开了。

再来看看侵占浮动元素的问题

先定义两个div：

css

    .left{
            width: 100px;
            height: 100px;
            background: salmon;

            float: left;
        }

        .right{
            width: 300px;
            height: 200px;
            background: black;
        }

效果图为：

满足了规则第五点：
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此

所以我们要将红色区域撑到黑色区域的左边，就需利用规则第六条
BFC的区域不会与float重叠
我们给黑色区域right设置一个 overflow: hidden; 属性来触发BFC；

.right{
            width: 300px;
            height: 200px;
            background: black;


            overflow: hidden;
        }

效果图为:

能够看到红色区域已经撑到黑色区域的左边

如果，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的支持，如有不足，请多指教。

联系方式：

wx：bsl521921

云服务器 GPU云服务器 java里的.css php中css的用法 bfc bfc布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114612.html

css里的BFC的用法

摘要：的概念比较抽象，但通过实例分析，有助于我们对的理解。在此仅列举了几个例子，欢迎大家一起探索更多一、对BFC的了解 Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）二、如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： ...

ISherry 2019-08-29 16:06 评论0 收藏0
css里的BFC的用法

摘要：的概念比较抽象，但通过实例分析，有助于我们对的理解。在此仅列举了几个例子，欢迎大家一起探索更多一、对BFC的了解 Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）二、如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： ...

jsbintask 2019-08-02 10:58 评论0 收藏0
CSS里的BFC和IFC的用法

摘要：行宽的高度为包含框的高度，高度为行框中最高元素的高度。行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。一、BFC Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。（可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 1、BFC的布局规则例如以下： ①.内...

ityouknow 2019-08-02 16:17 评论0 收藏0
CSS里的BFC和IFC的用法

摘要：行宽的高度为包含框的高度，高度为行框中最高元素的高度。行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。一、BFC Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。（可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 1、BFC的布局规则例如以下： ①.内...

BaronZhang 2019-08-30 10:51 评论0 收藏0