外边距溢出
小编在此之前总是分不清外边距溢出和高度坍塌,在此次复习中,小编分清了,good!
外边距溢出:特殊情况下,给子元素设置外边距时,效果会做用到父元素(父元素未设置宽高)上
解决方法:
1.给父元素设置边框
父元素{
border:1px solid red;
}
2.使用父元素内边距代替子元素外边距
3.在第一个子元素位置处添加空的table(添加伪元素,内容生成)
/*上外边距溢出*/
父元素::before{
content:'';
display:table;
}
/*下外边距溢出*/
父元素::after{
content:'';
display:table
}
高度坍塌
由于浮动元素会脱离文档流,所以导致不占据页面空间,所以会对父元素高度带来一定影响,如果所有的元素都浮动,就会造成父元素高度为0
解决方案:
1.给父元素设置浮动
2.设置父元素的宽高
3.为父元素设置overflow属性
4.在父元素的最后添加一个空的子元素,设置clear:both
5.使用内容生成的方式
.clear:after{
content:'',
display:block;
clear:both
}