css清除浮動的方法：1、浮動程式碼後面新增一個設定了「clear:both」樣式的空div標籤。 2.為父級元素新增一個設定「clear:both;」樣式的after偽元素。 3.給父元素設定「overflow: auto」樣式。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在我們寫程式碼的時候，有時因為使用了float浮動元素而導致頁面中某些元素不能正確的顯示。
但使用float浮動元素後，會有一些不好的影響：
（1）由於浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後，因為浮動元素脫離文檔流不佔據原來的位置
（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結構顯示
這個時候就需要清除浮動了，下面介紹一些css清除浮動的方法。
（1）使用clear:both清除浮動
#在程式碼中在放一個空的div標籤，然後給這個標籤設定clear:both來清除浮動對頁面的影響。它的優點是簡單，方便相容性好，但是一般情況下不建議使用該方法，因為會造成結構混亂，不利於後期維護
<div style="clear: both"></div>
（2）利用偽元素clearfix來清除浮動
為父級元素添加了一個:after偽元素，透過清除偽元素的浮動，達到撐起父元素高度的目的
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}（3）使用CSS的overflow屬性
當給父元素設定了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了，它的本質是建構了一個BFC，使得達到撐起父元素高度的效果
.box{
border:1px solid #ccc;
background:#eff2f4;
overflow: auto
}（學習影片分享：css影片教學）
以上是css要如何清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
