1. 先上一段代碼清楚浮動的代碼, 外層ul設置overflow為hidden, 內層li設置float為left左浮動
1 <!DOCTYPE html> 2 <html> 3 <style> 4 * { 5 margin: 0; 6 padding: 0; 7 } 8 ul { 9 list-style-type: none; 10 overflow: hidden; 11 background-color: #333; 12 } 13 li { 14 float: left; 15 } 16 li a { 17 display: block; 18 color: red; 19 text-align: center; 20 padding: 14px 16px; 21 text-decoration: none; 22 } 23 </style> 24 <meta charset="utf-8"> 25 <body> 26 <ul> 27 <li><a class="active" href="#home">Home</a></li> 28 <li><a href="#news">News</a></li> 29 <li><a href="#contact">Contact</a></li> 30 <li><a href="#about">About</a></li> 31 </ul> 32 </body> 33 </html>
2.出現如下顯示, 寬度為瀏覽器寬度
3. 去掉overflow: hidden后, 可以看到
(尾巴在這兒)
4. 為什么去掉ul去掉overflow: hidden之后沒在了, 其實不是沒在了, 看到由於沒有設置高度, height: auto為自動值, 就是根據里面的內容自動設置高度, 但是li設置了左浮動, 已經浮動起來了屬於浮動流, 不在普通流中, 但是ul還是在普通流, 他普通流中的內容為空, 所以沒有高度.
5. 做個實驗, 去掉ul的overflow: hidden后, 在里面加入一個普通流的<span>, 可以看到下面效果, ul的高度就是span撐起來的高度
1 <ul> 2 <span style="color:white">我是普通流</span> 3 <li><a class="active" href="#home">Home</a></li> 4 <li><a href="#news">News</a></li> 5 <li><a href="#contact">Contact</a></li> 6 <li><a href="#about">About</a></li> 7 </ul>
6. 繞了一圈, 回到正題, 首先說下overflow的意思: 屬性規定當內容溢出元素框時發生的事情, w3school解釋如下, 簡單的說hidden 的意思是超出的部分要裁切隱藏掉
7. 那么如果 float 的元素li不占普通流位置,
普通流的包含塊ul設置了overflow: hidden要根據內容高度裁切隱藏,
並且ul高度是默認值auto, 那么不計算其內浮動元素高度就裁切就有可能會裁掉float的li
這是反布局常識的
所以如果沒有明確設定容器ul高情況下
它要計算內容全部高度才能確定在什么位置hidden
浮動流的高度就要被計算進去, 就是li的高度,
一計算進去就順帶達成了清理浮動的目標