在一个 BFC 里,盒子会在垂直方向一个接一个地放置,盒子垂直方向的距离由上下 margin 决定。
在一个 BFC 里,一个块级元素总是占满整行的宽度,其计算公式如下:
full width = margin + border + padding + width => margin + width => margin-left + width + margin-right
block 1
block 2
block 3
block 4
在一个 BFC 里,盒子垂直方向的距离由上下 margin 决定,在同一个 BFC 中,垂直方向相接的间距会发生合并。如都为正值,则取最大值;如一正一负,则取相加后的值;如都为负,则取绝对值大的那个。
block 5 margin-bottom 为 10px
block 6 margin-top、margin-bottom 都为 30px
block 7 被包裹了一层父级元素 block wrap,其 margin-top 为 10px。由于 block 7、block wrap 的 margin-top 直接与 block 6 的 margin-bottom 相接,所以三者会发生合并并取最大值。而其 margin-bottom,由于父级元素设置了一个 padding-bottom,隔开了与 block 8 的 margin-top 相接,所以不会合并 。
block 8
block 9 margin-bottom 为 -10px
block 10 margin-top、margin-bottom 为 20px
block 11 margin-top 为 -30px
block 12 margin-bottom 为 -10px
block 13 margin-top 为 -5px
block 14 margin-bottom 为 10px
block 13 margin-top 为 10px。父元素新建了一个 BFC,所以 margin 没有合并
块容器盒要么只包含行内级盒,要么只包含块级盒。但通常文档会同时包含两者。在这种情况下,将创建匿名块盒来包含毗邻的行内级盒。(这也就是后面所说的IFC里面绝不会包含块级元素)
我是块级元素,但是我的前后都不是
我也是直接文本默认没有新建一个BFC,block-wrap 没有包括浮动图片的高度
我是块级元素
新建一个BFC,block-wrap 包括浮动图片的高度
我是块级元素