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

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

子div撑不开父div的情况：

    
tatatattttaatatatatatatata
    
tatatattttaatatatatatatata

显示结果：

解决方法：

（一）：加

代码实例：

    
tatatattttaatatatatatatata
    
tatatattttaatatatatatatata
    
    

显示结果：

分析：

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

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

代码实例：

    
tatatattttaatatatatatatata
    
tatatattttaatatatatatatata

显示结果：

分析：

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

代码实例：

    
tatatattttaatatatatatatata
    
tatatattttaatatatatatatata

显示结果：

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

代码实例：

    
tatatattttaatatatatatatata
    
tatatattttaatatatatatatata

显示结果：

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