一. CSS外边距折叠问题
在CSS垂直布局中,相邻方向的垂直外边距会发生重叠现象。
垂直外边距折叠问题分2种情况:
- 兄弟元素
在相邻兄弟元素的垂直外边距中,当发生重叠时,会取两者之间的较大值。
该现象可以避免两个元素间的距离过大,在实际开发中通常是有利的,无需处理。
eg: 元素A margin-bottom:100px; 相邻兄弟元素B marigin-top:200px; 则元素A与B间的外边距为200px。
*如果兄弟元素的垂直外边距一正一负,则取两者之和;如果均为负值,则取两者绝对值较大的值。
- 父子元素
在父子元素中的相邻外边距中,如果父元素没有设置任何内边距/边框值,那么设置子元素的垂直上外边距时会传递至父元素。
该现象会影响到页面的布局,因此需要进行处理。
eg: html为根元素,div为父元素,p为div的子元素
html{
border:1px solid red;
}
div {
width: 200px;
height: 200px;
background-color: yellow;
}
p {
margin-top: 100px;
}
结果:
处理方案:
- 不设置子元素的外边距;
- 设置父元素的内边距/边框值,使子元素和父元素的上外边距不相邻(在标准页面布局中需注意按要求修改对应内容区width/height值);
- 设置父元素的overflow属性,属性值非visible;—开启BFC
- 通过给父元素设置::before伪元素;
div::before{content:'';display:table;}
二. CSS高度塌陷问题
在默认情况下,当父元素未设置高度height时,会自动被子元素的内容撑开;但当设置子元素为浮动后,由于浮动会使子元素完全脱离文档流,导致无法撑起父元素,父元素高度丢失,即CSS高度塌陷问题。
该现象会导致父元素下的元素自动上移,影响页面布局,所以需要进行处理。
eg: div为父元素,p为div的子元素
div {
background-color: yellow;
border:1px solid red;
}
p {
float:left;
}
结果:
处理方案:
- 设置父元素高度;
- 设置父元素的overflow属性,属性值非visible,使其可以包含浮动的子元素;—开启BFC
- 通过给父元素设置::after伪元素;
div::after{content:'';display:block;clear:both;}
总结:clearfix样式
既解决CSS父子元素的外边距折叠问题,又解决了CSS高度塌陷问题。
.clearfix::before,.clearfix::after{
content:’’;
display:table;
clear:both;
}