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

为什么80%的码农都做不了架构师？>>>

子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>

显示结果：

转载于:https://my.oschina.net/jingyao/blog/777252