CSS清除浮動的方法

本篇內容介紹了“CSS清除浮動的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

CSS清除浮動的另一種別致的方法

在進行浮動布局時，大多數人都深知，在必要的地方進行浮動清理：

<div></div>。

例如：

ExampleSourceCode

<divstyledivstyle="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px;background:#EEE;">SomeContentdiv> div>

此時預覽此代碼，我們會發現最外層的父元素floatcontainer,并沒有顯示。這是因為子元素因進行了浮動，而脫離了文檔流，導致父元素的height為零。

若將代碼修改為：

ExampleSourceCode

<divstyledivstyle="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px;  background:#EEE;">SomeContentdiv> <divstyledivstyle="clear:both">div> div>

注意，多了一段清理浮動的代碼。這是一種好的CSS代碼習慣，但是這種方法增加了無用的元素。這里有一種更好的方法，將HTML代碼修改為：

ExampleSourceCode

<divclassdivclass="clearfix"style="background:#666;">  <divstyledivstyle="float:left;width:30%;height:40px;  background:#EEE;">SomeContentdiv> div>

◆定義CSS類，進行“浮動清理”的控制：

ExampleSourceCode

.clearfix:after{}{  content:".";  clear:both;  height:0;  visibility:hidden;  display:block;  }  /*這是對Firefox進行的處理，因為Firefox支持生成元素，而IE所有版本都不支持生成元素*/  .clearfix{}{  display:inline-block;  }  /*這是對Mac上的IE瀏覽器進行的處理*/  /**//*HidesfromIE-mac\*/  *html.clearfix{}{height:1%;}  /*這是對win上的IE瀏覽器進行的處理*/  .clearfix{}{display:block;}  /*這是對display:inline-block;進行的修改，重置為區塊元素*/  /**//*EndhidefromIE-mac*/

此時，預覽以上代碼(刪去這種注釋)，會發現即使子元素進行了浮動，父元素floatcontainer仍然會將其包圍，進行高度自適應。

“CSS清除浮動的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！