1.给父元素设置固定宽高
这个方式比较简单,在此不做事例说明
2.在浮动的元素后面 添加空元素并设置clear: both;
<style>
.num1 {
float: left;
width: 100px;
height: 20px;
background: #ccc;
}
.num11 {
float: right;
width: 100px;
height: 30px;
background: rgb(158, 155, 155);
}
.num111 {
height: 30px;
border: 1px solid;
clear: both;
}
</style>
<div class="content">
<div class="num1"></div>
<div class="num11"></div>
<div class="num111"></div>
</div>
3.父元素没有高度,由内容撑开,清除子元素的浮动,给父元素添加overflow:hidden
<style>
.overflow{
width: 100%;
border: 1px solid #ccc;
overflow: hidden;
}
.num2 {
float: left;
width: 100px;
height: 100px;
border: 1px solid #aaa;
}
.num22 {
float: left;
width: 100px;
height: 100px;
border: 1px solid pink;
}
</style>
<div class="overflow">
<div class="num2"></div>
<div class="num22"></div>
</div>