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.在子元素的最后再加一個空的塊級元素,設(shè)置樣式clear:both;
3.父元素設(shè)置after偽元素:
#father::after{
content: '';
clear: both;
display: block;
overflow: hidden;
}
父元素設(shè)置after
