父元素没有设置高度，高度由内容撑起
<div class="father cle">
<div class="box1">first</div>
<div class="box2">second</div>
</div>
<div class="foot"></div>
father {
400px;
border: 1px solid red;
}
.box1 {
100px;
height: 100px;
background-color: cornflowerblue;
}
.box2 {
100px;
height: 100px;
background-color: deepskyblue;
}
.foot {
500px;
height: 200px;
background-color: cadetblue;
}
当给子元素设置float：left时
1.此时父元素的高度没有了，可以在父元素中添加内容（再添加一个div，给这个div设置clear：both）
<div class="father cle">
<div class="box1">first</div>
<div class="box2">second</div>
<div class="box3">third</div>
</div>
<div class="foot"></div>
.father {
400px;
border: 1px solid red;
}
.box1 {
100px;
height: 100px;
background-color: cornflowerblue;
float: left;
}
.box2 {
100px;
height: 100px;
background-color: deepskyblue;
float: left;
}
.foot {
500px;
height: 200px;
background-color: cadetblue;
}
.box3 {
clear: both;
}
2.再父元素中设置overflow：hidden
3.设置after伪类
<div class="father cle">
<div class="box1">first</div>
<div class="box2">second</div>
</div>
<div class="foot"></div>
.cle:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.cle {
*zoom: 1;
}
4.使用after和before双伪类
.cle:after,
.cle:before {
content: "";
display: table
}
.cle:after {
clear: both;
}
.cle {
*zoom: 1;
}
<div class="father cle">
<div class="box1">first</div>
<div class="box2">second</div>
</div>
<div class="foot"></div>