father里面有三个son,然后son是浮动的:
<div id="father">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<style>
#father{
border: solid 1px #0077AA;
}
.son{
border: solid 1px #f00;
width: 100px;
height: 100px;
float: left;
}
</style>
浮动
1.给父元素加overflow: hidden;
<style>
#father{
border: solid 1px #0077AA;
overflow: hidden;
}
.son{
border: solid 1px #f00;
width: 100px;
height: 100px;
float: left;
}
</style>
父元素加overflow: hidden
2.在子元素的最后再加一个空的块级元素,设置样式clear:both;
3.父元素设置after伪元素:
#father::after{
content: '';
clear: both;
display: block;
overflow: hidden;
}
父元素设置after
