溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

為什么要清除浮動

發(fā)布時間：2020-10-14 14:31:53 來源：億速云 閱讀：225 作者：小新 欄目：web開發(fā)

小編給大家分享一下為什么要清除浮動，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

clearfix清除浮動分為兩種：

清除自身浮動

清除父級浮動

一、為什么要清除浮動

一個塊級元素的高度如果沒有設(shè)置height，那么其高度就是由里面的子元素來撐開的，如果子元素使用浮動，脫離了標(biāo)準的文檔流，那么父元素的高度會將其忽略，你可以使用firebug查看下如果不清除浮動，父元素會出現(xiàn)高度不夠，那樣如果設(shè)置border或者background都得不到正確的解析。

簡潔清除浮動

clearfix1:before,.clearfix1:after{    content: "";    display: table; }
.clearfix1:after{    clear: both;    overflow: hidden; }
.clearfix1{    zoom: 1; }

經(jīng)典清除浮動：

.clearfix2:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";   
 clear: both;    height: 0; } * html 
 .clearfix2     { zoom: 1; } /* IE6 */*:first-child+html .clearfix2 { zoom: 1; } /* IE7 */

overflow清除浮動：

/* overflow:auto */#demo3{    overflow:auto;*zoom:1; }/*或 overflow:hidden */#demo4{    overflow:hidden;*zoom:1; }

inline-block方式

#demo5{    display:inline-block;*display:inline;*zoom:1; }

這個方法和上面的其它方法會有點差異，主要是inline-block造成的。

以上是為什么要清除浮動的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手