有時我們需要用到浮動,但又不想由于浮動的某些特性影響布局,這時就需要清除浮動
清除浮動主要應用的是CSS中的clear屬性,clear屬性定義了元素的哪一側不允許出現浮動元素.
下面是兩種應用比較廣泛的清除浮動的方法:

// 在需要的地方添加定義了clear:both的空標簽 <style> html body div.clear, html body span.clear {background: none;border: 0;clear: both; /* 這句是重點, 其他都是兼容性代碼 */display: block;float: none;font-size: 0;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0; } /* 在需要清除浮動的元素后面添加 <div class="clear"> </div> 即可 */

上面是一個"萬能"的清除浮動代碼,可以在不同的瀏覽器下兼容

// 對父元素使用:after偽類 .clearfix:after {content: "020";display: bloack;height: 0;clear: both; } .clearfix {zoom: 1;}.left {float: left;}.right {float: right;}<div class= "div1 clearfix"><div class="left">Left</div><div class="right>Right</div> </div> /* 使用調試工具可以看到,父元素的高度不再為0了 */

參考 《CSS高效開發實戰》P21

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css --- 清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。