资讯专栏INFORMATION COLUMN

从例子来看BFC

EdwardUp / 1587人阅读

摘要:实例从实例上可以看到,元素的外边距会触碰到包含块容器的外边框,也就是元素左边与容器左边相接触,与浮动元素发生了重叠。实例此时发现高度会重新被撑开,所以计算的高度浮动元素也会参与计算

BFC

首先BFC的英文全称Block Format Context,也就是块级格式化上下文。

BFC特性

首先,我们大家都知道的BFC特性:

内部的元素会在垂直方向,从顶部一个接一个的放置

Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;

BFC的区域不会与float box重叠。

BFC就是页面一个独立的容器,容器里面的元素不会影响到外面的元素,反之亦然。

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

创建BFC方法

下面也是大家都熟悉的创建BFC的方法

根元素

float不为none

overflow不为visible

display为table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一个为专门创建BFC的属性

position为absolute,fixed

实例 实例1

从实例1可以看到特性1,内部元素会从顶部一个接一个的放置,并且属于同一个BFC的两个相邻的margin会发生重叠。如何解决边距重叠的问题呢?此时我们需要给元素套上一个父元素,将父元素变成BFC。

实例

这样便可以解决边距重叠问题。

实例2

从实例2上可以看到,元素的外边距会触碰到包含块容器的外边框,也就是元素左边与容器左边相接触,与浮动元素发生了重叠。

当右面元素触发BFC的时候,不会与左面元素发生重叠,见实例

实例3

当两个子元素都进行浮动时,此时父元素的高度会消失,第六个特性,计算BFC的高度时,浮动元素也会参与计算,此时我们触发父元素的BFC。实例

此时发现高度会重新被撑开,所以计算BFC的高度浮动元素也会参与计算

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

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

相关文章

  • 例子来看BFC

    摘要:实例从实例上可以看到,元素的外边距会触碰到包含块容器的外边框,也就是元素左边与容器左边相接触,与浮动元素发生了重叠。实例此时发现高度会重新被撑开,所以计算的高度浮动元素也会参与计算 BFC 首先BFC的英文全称Block Format Context,也就是块级格式化上下文。 BFC特性 首先,我们大家都知道的BFC特性: 内部的元素会在垂直方向,从顶部一个接一个的放置 Box垂直方...

    Jeff 评论0 收藏0
  • CSS > 译文:理解CSS中的块级格式化上下文

    摘要:译文理解中的块级格式化上下文块级格式化上下文是网页视觉渲染的一部分,并用于决定块盒子的布局。根据所言浮动绝对定位元素为或行内块元素表格单元格表格标题以及属性值不为的元素除了该值被传播到视点的情况将创建一个新的块级格式化上下文。 CSS > 译文:理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

    LancerComet 评论0 收藏0
  • JS每日一题: 如何理解CSS中BFC?

    摘要:期如何理解中定义块格式化上下文,是页面的可视化渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。 20190416期 如何理解CSS中BFC? 定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。 BFC 特性及应用 同一个...

    lentoo 评论0 收藏0
  • 外边距合并

    摘要:如下图和外边距合并之后,边距为。自己和自己合并当元素内容为空时,元素设置的上下会自己和自己合并。二阻止外边距合并的方法给父元素加如下图给加上之后,和就没有产生外边距合并了。 一:外边距合并的场景 从3个简单的小例子来看外边距合并: 1、父子合并 给h1加50px的margin,但实际上h1和div的margin合并在一起了showImg(https://segmentfault.com...

    _Dreams 评论0 收藏0
  • 深入清除浮动原理

    摘要:如下图所示可以看到父元素的高度为为了解决这种状况就要清除浮动了。下面详细看一下这两大类清除浮动的方式及原理。所以,避免穿透啊,清除浮动什么的也好理解了。 关于浮动 设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示:...

    freewolf 评论0 收藏0

发表评论

0条评论

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