摘要:的概念比较抽象,但通过实例分析,有助于我们对的理解。在此仅列举了几个例子,欢迎大家一起探索更多
一、对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、解决浮动高度塌陷问题 示例:1
2
3
运行结果: 解析:第一幅图是浮动塌陷了,为了解决这个问题只用在.one标签上加上overflow: hidden; 三、解决侵占浮动元素的问题 示例:BFC浮动问题 你好世界!Hello World!
运行结果: 解析:左边第一幅图是被浮动元素侵占,为了解决这个问题只用在.jfj标签上加上overflow: hidden就可以; 总结:以上就是关于BFC的一些分析,BFC 是一种概念,是对前端布局技术的一种理论上的总结,掌握它可以让我们在使用CSS +DIV进行布局时,知道一些特殊操作以及规避问题的原理。BFC的概念比较抽象,但通过实例分析,有助于我们对BFC的理解。 在此仅列举了几个例子,欢迎大家一起探索更多^_^ 12
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113521.html
摘要:里的用法,可以把理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素。规则内部的盒子会在垂直方向,一个个地放置。 css里的BFC用法 BFC(Block Formatting Contexts),可以把BFC理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素。 规则 1.内部的盒子会在垂直方向,一个个地放置。 2.BFC是页面上的一个隔离的独立容器,容器里面的子元素...
摘要:的概念比较抽象,但通过实例分析,有助于我们对的理解。在此仅列举了几个例子,欢迎大家一起探索更多 一、对BFC的了解 Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素) 二、如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性: ...
摘要:行宽的高度为包含框的高度,高度为行框中最高元素的高度。行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框。 一、BFC Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。 (可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素)。 1、BFC的布局规则例如以下: ①.内...
摘要:行宽的高度为包含框的高度,高度为行框中最高元素的高度。行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框。 一、BFC Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。 (可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素)。 1、BFC的布局规则例如以下: ①.内...
阅读 1929·2021-09-04 16:45
阅读 708·2019-08-30 15:44
阅读 868·2019-08-30 13:07
阅读 430·2019-08-29 16:06
阅读 1295·2019-08-29 13:43
阅读 1213·2019-08-26 17:00
阅读 1502·2019-08-26 13:51
阅读 2252·2019-08-26 11:48