css里的BFC的用法

ISherry 发布于2019-08-29 16:06 / 370人阅读

摘要：的概念比较抽象，但通过实例分析，有助于我们对的理解。在此仅列举了几个例子，欢迎大家一起探索更多

一、对BFC的了解 Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则 （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素） 二、如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素；

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

绝对定位元素：position (absolute、fixed)

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

overflow 除了visible以外的值 (hidden、auto、scroll)

三、BFC的布局规则 内部的盒子会在垂直方向，一个个地放置；

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

属于同一个BFC的两个相邻Box的上下margin会发生重叠；

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

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

BFC的区域不会与float重叠；

BFC的应用 1、解决margin重叠问题 示例：

运行结果 解析：1和2margin重叠了；为了让3不跟1，2一样只用在3上面加一个overflow: hidden。 2、解决浮动高度塌陷问题 示例：

      


    
    
    
    BFC浮动问题
    


    
    
    Hello World!
    
    你好世界！

运行结果：

解析：第一幅图是浮动塌陷了，为了解决这个问题只用在.one标签上加上overflow: hidden; 三、解决侵占浮动元素的问题 示例：

1
2

运行结果：

解析：左边第一幅图是被浮动元素侵占，为了解决这个问题只用在.jfj标签上加上overflow: hidden就可以; 总结：以上就是关于BFC的一些分析，BFC 是一种概念，是对前端布局技术的一种理论上的总结，掌握它可以让我们在使用CSS +DIV进行布局时，知道一些特殊操作以及规避问题的原理。BFC的概念比较抽象，但通过实例分析，有助于我们对BFC的理解。 在此仅列举了几个例子，欢迎大家一起探索更多^_^

超融合服务器混合云 php中css的用法 java里的.css bfc bfc布局

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

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

css里的BFC用法

摘要：里的用法，可以把理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。规则内部的盒子会在垂直方向，一个个地放置。 css里的BFC用法 BFC(Block Formatting Contexts)，可以把BFC理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。规则 1.内部的盒子会在垂直方向，一个个地放置。 2.BFC是页面上的一个隔离的独立容器，容器里面的子元素...

王岩威 2019-08-05 16:57 评论0 收藏0
css里的BFC用法

摘要：里的用法，可以把理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。规则内部的盒子会在垂直方向，一个个地放置。 css里的BFC用法 BFC(Block Formatting Contexts)，可以把BFC理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。规则 1.内部的盒子会在垂直方向，一个个地放置。 2.BFC是页面上的一个隔离的独立容器，容器里面的子元素...

stefanieliang 2019-08-30 10:51 评论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