边距重叠
- 边界重叠是指两个或多个盒子(相邻或者嵌套)的相邻边界(其间没有任何非空内容,补白,边框)重合在一起而形成一个单一边界。
- 两个或多个块级盒子的垂直相邻边界会重合,它们的边界宽度是相邻边界宽度的最大值。
注意: 水平边界是不会重合的。
1. 父子元素边界重叠
代码示例:
<div class="parent">
<div class="child">
</div>
</div>
.parent {
background:green;
}
.parent .child {
background:red;
height: 100px;
margin-top: 10px;
}
效果图:
在这里父元素的高度是100px(而不是110px)。
这里发生了高度坍塌。
原因:
- 如果块元素的
margin-top
与它的第一个子元素的margin-top
之间没有border、padding、inline content、 clearance
来分隔。 - 或者块元素的
margin-bottom
与它的最后一个子元素的margin-bottom
之间没有border、padding、inline content、height、min-height、 max-height
分隔,那么外边距会塌陷。 - 子元素多余的外边距会被父元素的外边距截断。
修改css
如下(给父元素添加overflow:hidden
或者border
):
.parent {
background:green;
overflow: hidden;
/* border: 1px solid #000; */
}
.parent .child {
background:red;
height: 100px;
margin-top: 10px;
}
修改后效果图:
添加overflow:hidden;
添加border: 1px solid #000;
2. 兄弟元素边距重叠
代码示例:
<div id="content">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
#content {
background:green;
overflow: hidden;
width: 300px;
}
#content>p {
background:red;
margin: 20px auto 30px;
}
效果图:
由图可知,子元素之间发生了边距重叠,实际边距为上下边距的最大值30px。
解决上述问题的办法之一就是创建BFC.
什么是BFC?
块级格式化上下文(Block Formatting Context)
,也就是常说的BFC
它是Web页面的可视化CSS渲染区域的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
BFC布局规则
- 内部的盒子会在垂直方向,一个一个地放置
- BFC是页面上的一个隔离的独立容器
- 属于同一个BFC的两个相邻Box的上下margin会发生重叠
- 计算BFC的高度时,浮动元素也要参与计算
- 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
- BFC的区域不会与float重叠
创建BFC的条件
- 根元素或包含根元素的元素,即body根元素。
- 浮动元素,即
float
属性值不为none
(元素的position
为absolute
或fixed
). - 行内块元素(元素的
display
为inline-block
) - 表格单元格(元素的
display
为table-cell
,HTML表格单元格默认为该值) - 表格标题(元素的
display
为table-caption
,HTML表格标题默认为该值) - 匿名表格单元格元素(或者元素的
display
为table
,table-row
,table-row-group
,table-header-group
,table-footer-group
(分别是HTML table,row,tbody,thead,tfoot
的默认属性)或inline-table
) overflow
的值不为visible
的元素(overflow为hidden
)display
值为flow-root
的元素contain
值为layout,content或strict
的元素- 弹性元素(
display为flex或inline-flex
元素的直接子元素) - 网格元素(
display为grid或inline-grid
元素的直接子元素) - 多列容器(元素的
colunm-count或column-width
不为auto,
包括colum-count
为1) column-span为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器当中