<div>清除父元素塌陷</div>
<div id="fatherDiv">
<div class="sonDiv">1</div>
<div class="sonDiv">2</div>
<div class="sonDiv">3</div>
<div class="sonDiv">4</div>
<div class="sonDiv">5</div>
</div>
第一种方法,设置父元素的宽高
#fatherDiv{
border: 1px solid red;
width: 120px;
height: 30px;
}
.sonDiv{
border: 1px solid black;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
float: left;
}
第二种方法,设置父元素的溢出隐藏
#fatherDiv{
border: 1px solid red;
overflow: hidden;
}
.sonDiv{
border: 1px solid black;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
float: left;
}
第三种方法,清除浮动
#fatherDiv{
border: 1px solid red;
}
#fatherDiv:after{
content: '';
display: block;
clear: both;
}
.sonDiv{
border: 1px solid black;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
float: left;
}