因為浮動定位不屬於正常的頁面流，所以當子元素都是浮動元素時，非浮動的父容器在顯示時不會考慮子元素的位置，這樣子父元素就會出現坍塌的現象。
1.新增空元素
在父容器末尾新增乙個空元素，並且清除浮動,如：//html
class="layout">
class="content">
div>
class="content">
div>
class="clear">
div>
div>
//css
.content
.clear
2.讓父元素一起浮動
將父容器也設定為浮動，但是這樣子會影響後面元素的定位，而且有時候可能父元素是定位死的，浮動起不了作用
3.父元素自動清除浮動
給父元素加一句「overflow:hidden」;父元素就會自動清除浮動。但是有兩個缺點：乙個是ie 6不支援，另乙個是一旦子元素的大小超過父容器的大小，就會出顯示問題。
4..after，.before偽選擇符
.clearfix
:after
.clearfix
.cf
:before,
.cf:after
.cf:after
.cf
ie使用layout概念來控制元素的尺寸和位置。如果乙個元素有layout，它就有自身的尺寸和位置；如果沒有，它的尺寸和位置由最近的擁有布局的祖先元素控制。
其中zoom是為了相容ie7以及以下版本，zoom:1就是ie6 專用的 觸發 haslayout 屬性的，haslayout是ie特有的乙個屬性。很多的ie下的css bug都與其息息相關。在ie中，乙個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當乙個元素的haslayout屬性值為true時，它負責對自己和可能的子孫元素進行尺寸計算和定位。
zoom原理
zoom是設定或檢索物件的縮放比例。設定或更改乙個已被呈遞的物件的此屬性值將導致環繞物件的內容重新流動。
雖然此屬性不可繼承，但是它會影響物件的所有子物件( children )。這種影響很像 background 和 filter 屬性導致的變化。
此屬性對於 currentstyle 物件而言是唯讀的，對於其他物件而言是可讀寫的。
當設定了zoom的值之後，所設定的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這裡一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。
zoom屬是ie瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支援這個屬性。然而，zoom現在已經被逐步標準化，出現在 css 3.0 規範草案中。
目前非ie由於不支援這個屬性，它們又是通過什麼屬性來實現元素的縮放呢？
我們可以通過css3裡面的動畫屬性scale進行縮放。
為了實現inline-block的相容的時候，我們會這麼寫：
參考文件：
解決float帶來的父元素高度塌陷問題
1.為父元素新增高度。缺陷 高度要隨子元素所有高度變化而變化 2.clear屬性。使用 在浮動元素的同級元素新增clear屬性。缺陷 新增了多餘標籤 3.為父元素新增overflow hidden zoom 1屬性。缺陷 overflow hidden 會自動擷取超出父元素寬度的內容 4.為父元素新...
CSS clear屬性給float帶來哪些影響
關於clear屬性的定義參考 w3school 在閱讀w3school相關內容時一定要認真，認真，仔細，仔細閱讀 說明 部分 如果宣告為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外urfkrdx邊距邊界之下 ok，下面舉例說明下clear屬性到底給float clear常常和fl...
float精度問題
測試發現，0.99999999f 1f為true 不能用f1 f2來判斷兩個數相等，是因為雖然f1和f2在可能是兩個不同的數字，但是受到浮點數表示精度的限制，有可能會錯 單精度浮點數 float 是用來表示帶有小數部分的實數，表示範圍大，但是有不精確 不連續的特點。占用4個位元組 32位 儲存空間。...