资讯专栏INFORMATION COLUMN

css里的BFC的用法

ISherry / 363人阅读

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

一、对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

2

3

运行结果 解析: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的理解。 在此仅列举了几个例子,欢迎大家一起探索更多^_^

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

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

相关文章

  • cssBFC用法

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

    王岩威 评论0 收藏0
  • cssBFC用法

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

    stefanieliang 评论0 收藏0
  • cssBFC用法

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

    jsbintask 评论0 收藏0
  • CSSBFC和IFC用法

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

    ityouknow 评论0 收藏0
  • CSSBFC和IFC用法

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

    BaronZhang 评论0 收藏0

发表评论

0条评论

ISherry

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<