当父元素的所有子元素都浮动时,子元素高度会为0。
解决:
1:设置父元素的高度height(如果父元素高度固定,可使用。)
2:父元素设置为浮动(不推荐)
3:父元素的overflow属性设置为hidden。(如果没有元素需要隐藏,可以使用。)
4:在子元素后追加元素如<p style = "clear:both"></p>
(推荐)
5:
<style>
.ch1,.ch2{
width:100px;
height:100px;
float:left;
}
.ch1{
background: red;
}
.ch2{
background: green;
}
.parent{
border:1px solid #ddd;
}
.parent:after{
content:"";
display:block;
clear:both;
}
</style>
<body>
<div class = "parent">
<div class="ch1"></div>
<div class="ch2"></div>
</div>
</body>