CSS子元素浮动父元素自动撑开

问题

一般是父盒子中的子盒子使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
如下图所示：

<div style = "border:1px solid black;">
    <div style = "border:1px solid red;float:left;width:100px;height:100px;"></div>
<div>

解决：

1、对父级设置适合CSS高度
2、clear:both清除浮动

<span>/*clear:both清除浮动*/</span>
 <div class = "parent">
     <div class = "child"></div>
     <div class="clear"></div>
 </div>
 <style>
     .parent {
           border:1px solid black;
           padding:10px;
        }
        .clear {
            clear:both;
        }
        .child {
            float:left;
            width: 200px;
            height: 100px;
            border:1px solid red;
       }
 </style>

3、父级div定义 overflow:hidden

  <span>/*父级div定义 overflow:hidden*/</span>
    <div class = "parent2">
        <div class = "child2"></div>
    </div>
    <style>
         .parent2 {
            border:1px solid black;
            padding:10px;
            overflow: hidden;
        }
        .child2 {
            float:left;
            width: 200px;
            height: 100px;
            border:1px solid red;
        }
    </style>

详情代码