關於CSS clear both的認知

按照css規範，浮動元素（floats）會被移出文件流，不會影響到塊狀盒子的布局而只會影響內聯盒子（通常是文字）的排列。因此當其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？

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

，例如：

style="background:#666;">
style="float:left; width:30%; height:40px;background:#eee; ">some contentdiv>
div>

此時預覽此**，我們會發現最外層的父元素float container,並沒有顯示。這是因為子元素因進行了浮動，而脫離了文件流，導致父元素的height為零，若將**修改為：

style="background:#666;">
style="float:left; width:30%; height:40px;background:#eee; ">some contentdiv>
style="clear:both">
div>

注意，多了一段清理浮動的**。這是一種好的css**習慣，但是這種方法增加了無語義的元素。這裡有一種更好的方法，將html**修改為：

class="clearfix"
style="background:#666;">
style="float:left; width:30%; height:40px;background:#eee; ">some contentdiv>

定義css類，進行「浮動清理」的控制：

/* 利用生成內容清理浮動 for ie8(標準模式) 和非ie瀏覽器 */ .clearfix :after /* 激發ie中的haslayout屬性 for ie8(quirks)模式和ie6\7瀏覽器*/ .clearfix

/** * 1、'*' hack在ie6\7和ie8 quirks模式下能夠識別，而ie8標準模式下木能識別 * 2、zoom 來激發ie中的haslayout屬性 * 3、設定了的元素在ie8的相容模式或ie8之前的瀏覽器中其haslayout為true， * 但在ie8的標準模式下則不會觸發haslayout。

*/

以下是原方法： /* 這是對firefox進行的處理，因為firefox支援生成元素，而ie所有版本都不支援生成元素 */ .clearfix :after /* 這是對 mac 上的ie瀏覽器進行的處理 */ .clearfix /* hides from ie-mac \*/ * html .clearfix /* 這是對 win 上的ie瀏覽器進行的處理 */ .clearfix /* 這是對display: inline-block;進行的修改，重置為區塊元素*/

/* end hide from ie-mac */

此時，預覽以上**會發現即使子元素進行了浮動，父元素float container仍然會將其包圍，進行高度自適應。

關於CSS clear both的認知

CSS clear both清除浮動

CSS clear both清除浮動總結

關於this 的使用

關於CSS clear both的認知

CSS clear both清除浮動

CSS clear both清除浮動總結

關於this 的使用

相關推薦