我們都知道float：left屬性會讓元素向左浮動，如果用一個div將幾個左浮動的li包起來，是不是div的寬度被li撐得很長很長呢，代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul { border: 1px solid #1FC195; list-style: none; margin: 0; padding: 0; background-color: #CCCCCC; } ul li { padding: 0; margin: 0; float: left; width: 300px; height: 600px; background: #8FBC8F; margin: 5px; } </style> </head> <body> <div class="over-x"> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test3</li> <li>test3</li> <li>test3</li> <li>test3</li> </ul> </div> </body> </html>
但是實際的顯示效果卻是：
可以看見div的寬度不是被div撐得很長，二是直接換行了，
由此對float：left屬性進行了一些總結：當給元素用了float屬性，元素會自動尋找最近一級的父級的寬度，當這個父級的寬度不能滿足li所有的寬度和之后就會排到第二行，如果給這個父級足夠的寬度之后（一個>=li總和的寬度）便能實現該效果
這時候要是給那個父級增加一個父級（這個父級給一個較小的寬度，並且設置overflow-x:scroll）便可以再水平方向出現滾動條
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .over-x{ width:600px; overflow:scroll ; } ul{ border: 1px solid #1FC195; list-style: none; margin: 0; padding: 0; background-color: #CCCCCC; overflow-x: scroll; overflow-y: hidden; height: 610px; width:19000px } ul li{ padding: 0; margin: 0; float: left; width: 300px; height: 600px; background: #8FBC8F; margin: 5px; } </style> </head> <body> <div class="over-x"> <ul> <li>test1</li> <li>test2</li> <li>test3</li><li>test3</li><li>test3</li><li>test3</li><li>test3</li> </ul> </div> </body> </html>
效果
