溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css中為什么要清除浮動的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
一、理解清除浮動
1、為什么要清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現。
由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
準確地說，并不是清除浮動，而是清除浮動后造成的影響
2、清除浮動本質
清除浮動的本質:主要為了解決父級元素因為子級浮動引起內部高度為0的問題。
我們來詳細解釋下這句話
再解釋下就是在標準流下面一個父p沒有設置高度屬性,那么它的高度就會被子元素的高度撐開。但是如果這個父p中的子元素是浮動的話，如果父p下面再有
一個兄弟p，那么這個兄弟p就會遮擋這個父元素。這個現象也叫浮動溢出。
示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
.father{
height:200px;
border:1pxsolidred;
width:300px
}
.big{
width:100px;
height:100px;
background-color:purple;
float:left;
}
.small{
width:80px;
height:80px;
background-color:blue;
float:left;
}
.footer{
width:400px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<pclass="father">父p
<pclass="big">子p</p>
<pclass="small">子p</p>
</p>
<pclass="footer">兄弟p</p>
</body>
</html>
運行結果
很明顯這里，p1和p2已經上浮，而兄弟p就往上移動。這里因為父p有文字所以占了點高度，不然兄弟p會完全覆蓋父p。
當然我們可以通過設置父p的高度，來使它不被兄弟p所覆蓋。比如這里設置height:200px;
在刷新下頁面
當父p設置高度后，被覆蓋的問題卻是解決了，但在很多時候我們是不會去設置父p的高度，因為很多時候我們都不知道父p的高度要設置多少。
所以這個時候需要思考解決這個問題。
二、清除浮動的方法
清除浮動的方法本質:就是把父盒子里浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中，clear屬性用于清除浮動。
基本語法格式
選擇器{clear:屬性值;}
屬性值
1、額外標簽法
通過在浮動元素末尾添加一個空的標簽，例如
<pstyle="clear:both"></p>
我們在上面的代碼添加
<body>
<pclass="father">父p
<pclass="big">子p</p>
<pclass="small">子p</p>
<pstyle="clear:both"></p><!--只需在父盒子里最后面添加這個空標簽添加clear:both屬性就可以清除浮動-->
</p>
<pclass="footer">兄弟p</p>
</body>
運行結果
完美解決了。
優點通俗易懂，書寫方便。
缺點添加無意義的標簽，結構化較差。
2、父級添加overflow屬性方法
可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC后面會講）
可以給父級元素添加：overflow為hidden|auto|scroll都可以實現。
我們將上面代碼修改為
<body>
<pclass="father"style="overflow:hidden;">父p<!--父元素添加overflow:hidden-->
<pclass="big">子p</p>
<pclass="small">子p</p>
</p>
<pclass="footer">兄弟p</p>
</body>
也是能實現去除浮動的效果。
優點代碼簡潔
缺點內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
3、使用after偽元素清除浮動
:after方式為空元素的升級版，好處是不用單獨加標簽了**
示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>使用after偽元素清除浮動</title>
<style>
.clearfix:after{/*正常瀏覽器清除浮動*/
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;/*zoom1就是ie6清除浮動方式*ie7一下的版本所識別*/
}
.father{
border:1pxsolidred;
width:300px;
}
.big{
width:100px;
height:100px;
background-color:purple;
float:left;
}
.small{
width:80px;
height:80px;
background-color:blue;
float:left;
}
.footer{
width:400px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<pclass="fatherclearfix">
<pclass="big"></p>
<pclass="small"></p>
</p>
<pclass="footer"></p>
</body>
</html>
優點符合閉合浮動思想結構語義化正確
缺點由于IE6-7不支持:after，使用zoom:1觸發hasLayout。
注意：content:"."里面盡量跟一個小點，或者其他，盡量不要為空，否則再firefox7.0前的版本會有生成空格。
4、使用before和after雙偽元素清除浮動
使用方法將上面的clearfix樣式替換成如下
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
優點代碼更簡潔
缺點由于IE6-7不支持:after，使用zoom:1觸發hasLayout。
5、總結
1、在網頁主要布局時使用:after偽元素方法并作為主要清理浮動方式.文檔結構更加清晰；
2、在小模塊如ul里推薦使用overflow:hidden;（同時留意可能產生的隱藏溢出元素問題）；
感謝各位的閱讀！關于“css中為什么要清除浮動”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
