关于清除浮动那些事儿~
?
一、什么是浮動？
什么是浮動呢？一般是一個子元素使用了?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
<style type="text/css">.box{
width: 400px;
border: solid 2px red;
height: 150px;
margin: 50px auto;
}
</style>
父級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><!-- after 相當于在div2后添加了一個元素，并為其添加clear: both屬性--></div></body> </html>?
如圖，得到的依然是同樣的結果。這種方法清除浮動是現在最拉風的一種清除浮動，他就是利用偽元素 ::after 來在元素內部插入元素塊，從而達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于clear在html插入一個div.clear標簽，?而后者利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。
?
4、給浮動元素的父級元素添加?overflow：hidden 屬性
?
<style type="text/css">.box{width: 400px;
border: solid 2px red;
margin: 50px auto;overflow: hidden;
} </style>
這種方法必須定義寬度，同時不能定義高度，使用over：hidden瀏覽器自動檢測浮動元素的高度。這種方法的優點是代碼量少，缺點是如果子級為定位元素，而且子級寬度大于父級時，多余的內容會被隱藏
結語：清除浮動的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需多于的標簽，而且也能很好的兼容。當一個內層元素是浮動的時候，如果沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，因為此時浮動元素已經脫離了文檔流。也就是為什么外層不能被撐開了！?
?
轉載于:https://www.cnblogs.com/mysun-shine/p/6293473.html
總結
以上是生活随笔為你收集整理的关于清除浮动那些事儿~的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： KB2533623 下载
- 下一篇： 理解操作符