子div撐不開父div的幾種解決方法

子div撐不開父div的情況：

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

/*end hide from ie-mac*/

因為轉移符「\」，mac ie瀏覽器會忽略掉這段hack，但window ie不會，它會應用*html.clearfix來達到撐開div容器的目的（貌似mac ie沒有辦法解決這個問題，不顧使用者數量太少，safari支援就可以了o(∩_∩)o哈哈~）。

（三）父容器增加乙個屬性：overflow：hidden

**例項：

tatatattttaatatatatatatata tatatattttaatatatatatatata

顯示結果：

（四）父容器增加乙個屬性：display：table

**例項：

tatatattttaatatatatatatata tatatattttaatatatatatatata

顯示結果：