影响父级的子元素溢出与子元素浮动

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;
}