溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css中如何清除浮動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
清除浮動的方法有clearboth的方法、設置clearfix的方法、overflow的方法以及給父元素設置雙偽元素的方法
在我們寫代碼的時候，有時因為使用了float浮動元素而導致頁面中某些元素不能正確的顯示。
浮動導致的后果：
（1）由于浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后，因為浮動元素脫離文檔流不占據原來的位置
（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結構顯示
例：在一個div中設置三個div，讓三個div的來撐開父元素
<style>
.box{border:1px solid #ccc;background:pink;}
.red{width:100px;height:100px;background: red;}
.green{width:100px;height:100px;background:green;}
.blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>效果圖：
加了float:left之后，父元素無法被撐開
清除浮動的方法
（1）使用clear:both清除浮動
在代碼中在放一個空的div標簽，然后給這個標簽設置clear:both來清除浮動對頁面的影響。它的優點是簡單，方便兼容性好，但是一般情況下不建議使用該方法，因為會造成結構混亂，不利于后期維護
<div style="clear: both"></div>
（2）利用偽元素clearfix來清除浮動
給父級元素添加了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}（3）overflow方法的使用
當給父元素設置了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了，它的本質就是建構了一個BFC，這樣使得達到撐起父元素高度的效果
.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}（4）雙偽元素方法的使用
通過給父元素設置雙偽元素來達到清除浮動的效果
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}關于css中如何清除浮動就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
