子div撑不开父div的几种解决方法

子div撑不开父div的状况：

<style>
.example{
  background: #008000;
  width: 400px;
  margin: 10px;
  padding: 10px;
}
.example .childrenDiv{
  float: left;
  height: 100px;
  width: 100px;
  word-break: break-all;
  word-wrap: break-word;
}
</style>
<!--示例-->
<div class="example">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

显示结果：

解决方法：

（一）：加<div style="clear:both;"></div>

代码实例：

<!--方法一-->
<div class="example">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
    <!--解决方法-->
    <div style="clear: both;"></div>
</div>

显示结果：

分析：

父div做为外部容器，子div设置了float样式，则外部容器div由于内部没有clear致使不能被撑开，即内部div由于float：left以后，就丢失了clear：both和display：block的样式。

（二）：经过伪元素将父容器撑开

代码实例：

<style>
.clearfix:after{
            content:".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
}
/* Hides from IE-mac \*/
*html.clearfix{height: 1%;}
/*end hide from IE-mac*/
</style>

<!--方法二-->
<div class="clearfix example">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

显示结果：

分析：

1.不建议采用第一种方法，首先，代码中多了一个没有意义的div；其次，在用dojo作Drag&Drop的时候，因为这个div是父容器div的一个子节点，若是这个节点被移动，则会形成排版上的错误，并且若是要将子div移动到这个div以后，则会由于clear：both被强制换行显示。

2.方法二原理：after伪对象将在应用clearfix的元素的结尾添加content中的内容，在这里添加了一个“.”，而且把它的display设置成了block，高度设为0，clear设为both，visibility设为隐藏，即撑开容器。

3.由于windows IE不支持上述作法，因此要在IE上也完美显示，则必须在clearfix的css定义的后面加一些专门为IE设定的hack，即：

/* Hides from IE-mac \*/
*html.clearfix{height: 1%;}
/*end hide from IE-mac*/

由于转移符“\”，Mac IE浏览器会忽略掉这段hack，但window IE不会，它会应用*html.clearfix{height:1%;}来达到撑开div容器的目的（貌似Mac IE没有办法解决这个问题，不顾用户数量太少，Safari支持就能够了O(∩_∩)O哈哈~）。

（三）父容器增长一个属性：overflow：hidden

代码实例：

<!--方法三-->
<div class="example" style="overflow: hidden;">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

显示结果：

（四）父容器增长一个属性：display：table

代码实例：

<!--方法四-->
<div class="example" style="display: table;">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

显示结果：