當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

关于清除浮动那些事儿~

發布時間：2025/6/17 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了关于清除浮动那些事儿~ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?

一、什么是浮動？

　　什么是浮動呢？一般是一個子元素使用了?float?浮動屬性，導致父級元素不能被撐開，這樣浮動就產生了。

　 ??如下:

<!DOCTYPE html> <html><head>　　<meta charset="utf-8"><title></title><style type="text/css">.box{width: 400px;border: solid 2px red;margin: 50px auto;} .div1{width: 150px;height: 150px;border: solid 1px black;font-size: 50px;text-align: center;line-height: 150px;} .div2{width: 150px;height: 150px;border: solid 1px black;font-size: 50px;text-align: center;line-height: 150px;} </style></head><body><div class="box"><div class="div1">left</div><div class="div2">right</div></div></body> </html>?

如圖1，兩個元素left與right是在紅色的box里的；　　　　　　　　　　　　　　　　　　　

　　當我們給兩個子元素設置了?float?屬性后，就會變成圖2的情況。

.div1{float:left; } .div2{float:right; }

　　本來兩個子元素left和right是在紅色盒子box內的，因為對兩個子元素使用了float浮動，所以兩個子元素產生了浮動，導致父級紅色的box不能撐開，只剩下了邊框，這樣浮動就產生了。

　　簡單的說，浮動是因為使用了float:left或float:right或兩者都是有了而產生的浮動。?　　

二、浮動產生的負作用?

　　1、背景不能顯示
　　　　由于浮動的產生，如果對父級設置了background屬性，而父級不能被撐開，就會導致background不能顯示

　　 ??2、邊框不能撐開

　　　　如上圖中，如果父級設置了border邊框屬性，由于子元素使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。

?　　3、margin和padding設置值不能正確顯示
　　　　由于浮動導致父元素與子元素之間設置了padding、margin屬性的值不能正確顯示。

三、清除浮動的方法

　　1、給父級元素設置高度height　

　　父級div手動設置了height值，就解決了父級div無法自動獲取到高度的問題。

　　這種方法比較簡單、代碼少、容易掌握；但是也有缺點，就是這種方法只適合高度固定的布局，要給出精確的高度，如果高度不確定時，則不適合使用

　　2、?給浮動元素加一個兄弟元素，并對其設置clear: both屬性　　　

<div class="box"><div class="div1">left</div><div class="div2">right</div><div class="div3"></div> </div> <style type="text/css">.div3{clear: both;} </style>

　　給浮動元素添加一個兄弟元素，利用css的clear:both屬性清除浮動，可以讓父級div自動獲取到高度

　　這種方法的優點是簡單、代碼少、瀏覽器支持好、不容易出現怪問題；缺點是初學者不容易理解；而且如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

?　　3、據說是目前最高大上的方法 : ) ??給浮動元素的父元素增加偽元素 ?::after 屬性

<!DOCTYPE html> <html><head>　　<meta charset="utf-8"><title></title><style type="text/css">.box{width: 400px;border: solid 2px red;margin: 50px auto;}.box::after{display: block;content: "";clear: both;} .div1{width: 150px;height: 150px;border: solid 1px black;font-size: 50px;text-align: center;line-height: 150px;} .div2{width: 150px;height: 150px;border: solid 1px black;font-size: 50px;text-align: center;line-height: 150px;} </style></head><body><div class="box"><div class="div1">left</div><div class="div2">right</div></div></body> </html>

　　　如圖，得到的依然是同樣的結果。這種方法清除浮動是現在最拉風的一種清除浮動，他就是利用偽元素 ::after 來在元素內部插入元素塊，從而達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于clear在html插入一個div.clear標簽，?而后者利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。

　　4、給浮動元素的父級元素添加?overflow：hidden 屬性

　　　這種方法必須定義寬度，同時不能定義高度，使用over：hidden瀏覽器自動檢測浮動元素的高度。這種方法的優點是代碼量少，缺點是如果子級為定位元素，而且子級寬度大于父級時，多余的內容會被隱藏

　　　　結語：清除浮動的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需多于的標簽，而且也能很好的兼容。當一個內層元素是浮動的時候，如果沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，因為此時浮動元素已經脫離了文檔流。也就是為什么外層不能被撐開了！?

轉載于:https://www.cnblogs.com/mysun-shine/p/6293473.html

總結

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

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

事儿