1.子元素溢出
子元素溢出会影响到父级高度，子元素的margin-top/bottom的越界问题
解决方案：使用内容生成：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可能就会影响父元素的高度
解决办法 :使用内容生成：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;
}
网友评论