一、
由于需要将两个块级元素并列显示,我们需要用到float属性,浮动的框就可以左右移动,但是设置float属性后,这个块级元素就脱离了文档流,浮动元素不会影响块级元素的布局,但是影响内联元素的布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”。所以我就需要清除浮动。
二、
1.通过加入.clearfix:after类清除浮动
.clearfix:after{
display:block;
content:'';
clear:both;
height:0;
}
然后在所需要清除浮动的块级元素中的class中加入clearfix
2.添加新元素,使用clear:both
.clear{clear:both;}
<div class="clear"></div>