1.子元素溢出
子元素溢出會(huì)影響到父級(jí)高度玖瘸,子元素的margin-top/bottom的越界問題
解決方案:使用內(nèi)容生成:before
代碼如下:
/*html*/
<div id="out">
<div id="content"></div>
</div>
/*css*/
#out{
content:' ';
display: table;
}
#content{
width:100px;
height:100px;
margin-top:50px;
}
2. 子元素float可能就會(huì)影響父元素的高度
解決辦法 :使用內(nèi)容生成:after解決
代碼如下:
/*html*/
<div id="out">
<div class="d1 item"></div>
<div class="d2 item"></div>
<div class="d3 item"></div>
</div>
/*css*/
#item{
float: left;
width: 100px;
height: 100px;
border: 2px solid red;
}
#out:after{
content: "";
display: block;
clear: both;
}