輝太郎看前端(清除浮動的幾種解決方式)
阿新 • • 發佈：2021-01-13
前言
- 為什麼
使用浮動？- 為什麼要
清除浮動？- 清楚浮動有幾種
解決方案？
浮動
-使用浮動是因為在
html中有時候會遇到幾個塊元素並排的問題，所以就會使用到浮動。
<body>
<ul>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class=" 
為什麼清除浮動
由上圖可見，在浮動後父元素高度沒有了，為了解決父元素高度塌陷的問題，我們就要用到清除浮動。
- 清除由於子元素浮動帶來父元素高度塌陷的影響。
- 同級元素浮動後，會脫離文件流，對佈局造成了也要用到清除浮動。
給後邊的兄弟元素新增
clear:left;。
解決方案
ul{ border: solid blue 2px; margin-top: 20px; } .list{ width: 100px; height: 100px; margin: 10px 20px; float: left; border: 2px solid #ccc; background-color: rgb(233, 15, 15); } .clear{ clear: both; overflow: hidden; }
缺點：要在頁面新增許多冗餘元素，太過於麻煩，而且不符合語義化。
//父級 ul { border: solid blue 2px; margin-top: 20px; } //父級類名，偽元素 .box:after { content: ""; display: block; line-height: 0; visibility: hidden; clear: both; } .list { width: 100px; height: 100px; margin: 10px 20px; float: left; border: 2px solid #ccc; background-color: rgb(233, 15, 15); }
缺點：IE6/IE7不識別:after偽元素，存在相容性問題
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題。對於響應式佈局會有很大影響。
總結
float的屬性leftrightnoneinheritclear的屬性leftrightbothnoneinherit