解决高度塌陷问题,父子块元素垂直外边距的一起下沉的问题
1.在高度塌陷的父元素的最后添加一个空白的div,不设置浮动,对其进行清除浮动clear,
2.通过伪类选择器结合after,添加一个内联元素,然后转换为块元素,再清除浮动clear
<style> .box1{ border:solid green 1px; } .box2{ width: 200px; height: 200px; background-color:hotpink; float: left; } .clearfix:after{ content: ""; display: block; clear: both; } </style> <body> <div class="box1 clearfix"> <div class="box2"> </div>
父子块元素垂直外边距,修改子元素的上外边距会导致父元素的上外边距也下沉,用伪类给父元素前添加一个content,设置位块元素
.clearfix::before{ content:""; display: table; }