原始代碼：
<html> <head> <title>Float</title> <style type = "text/css"> ul { list-style-type: none; width: 800px; background: blue; } li { float: left; } </style> </head> <body> <ul> <li><img src = "1.jpg" /></li> <li><img src = "2.jpg" /></li> <li><img src = "3.jpg" /></li> <li><img src = "4.jpg" /></li> <li><img src = "5.jpg" /></li> <li><img src = "6.jpg" /></li> </ul> </body> </html>
子div有內容，父div高度為0是因為子元素設置了 float屬性的緣故。
解決方法
1 給包含元素設置高度height 值。
ul { list-style-type: none; width: 800px; background: blue; height: 300px; /*添加高度屬性*/ }
2 利用overflow屬性
可以包含元素設置overflow屬性，並設置屬性值為auto或者hidden。
ul { list-style-type: none; width: 800px; background: blue; overflow: hidden; /*添加overflow屬性，可以設置為auto或者hidden*/ }
3 添加一個空的div
這種方法是添加一個空的div，這個div和浮動元素同一級別，且位於浮動元素的最后。這種方法要改動兩個地方，一個是html代碼，另一個是必須要為這個div添加一個clear屬性：
<html> <head> <title>Float</title> <style type = "text/css"> ul { list-style-type: none; width: 800px; background: blue; } li { float: left; } /*為添加的空div設置的樣式*/ .clearDiv { clear: both; } </style> </head> <body> <ul> <li><img src = "1.jpg" /></li> <li><img src = "2.jpg" /></li> <li><img src = "3.jpg" /></li> <li><img src = "4.jpg" /></li> <li><img src = "5.jpg" /></li> <li><img src = "6.jpg" /></li> <div class = "clearDiv"></div> <!--新添加的空div，它和浮動元素同一級別，且位於最后--> </ul> </body> </html>
4 利用偽元素:after
用這種方法時要為包含元素先添加一個類名，這里為ul標簽設置的類名.clearUl,代碼如下:
<html> <head> <title>Float</title> <style type = "text/css"> ul { list-style-type: none; width: 800px; background: blue; } li { float: left; } /*利用:after偽元素*/ .clearUl:after { content:""; display: block; clear: both; } </style> </head> <body> <ul class = "clearUl"> <!--為包含的外圍元素設置類--> <li><img src = "1.jpg" /></li> <li><img src = "2.jpg" /></li> <li><img src = "3.jpg" /></li> <li><img src = "4.jpg" /></li> <li><img src = "5.jpg" /></li> <li><img src = "6.jpg" /></li> </ul> </body> </html>
在:after為元素里面用到了content屬性，這樣這條樣式的意思是在ul元素后面生成指定的內容，這里生成的內容是一個空字符串，因為只是讓它來消除ul標簽的高度折疊，並不讓它顯示出來。還有，這條樣式里有display屬性，要將他設置成block，這樣clear屬性才會起作用，因為清除操作只作用於塊級元素，它的原理是為要執行清除操作的元素添加上邊距，以此讓元素降到浮動元素的下面，而操作行內元素的上邊距不起作用。
當我們沒有給父div設置高度的時候，子div的高度，就會撐開父div，而在另一個方面，當我們給父div加上一個高度值，那么無論子div的高度是多少，父div高度都是我們設定的值。而當子div的高度超過父div的高度的時候，超出的部分就會被隱藏。
-------------------
原文鏈接：https://blog.csdn.net/cedar777/article/details/53886182