{clear:both;}設置了clear 屬性的元素，其上邊框位置會緊貼浮動元素的 margin-bottom 邊界位置渲染，使包含浮動元素的容器高度正常。所以適用于浮動元素后面容器之內有個非浮動元素，或是額外添加一個新的空元素。
.after-clear-float :after{content:""; display:block; clear:both;}利用偽類添加新元素，原理同上，所以只適用于父容器最后一級子元素是浮動的，即浮動元素后面沒有非浮動元素把它和父容器隔開。只是IE6/7不支持:after 偽元素。
{overflow:hidden;}或overflow:auto;創建了overflow 樣式值為非visilbe的元素，實際上是創建了 CSS 2.1 規范定義的 Block Formatting Contexts，會重新計算其內部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動元素高度。這個名詞過于晦澀，在 CSS 3 草案中被變更為名詞 Root Flow，顧名思義，是創建了一個新的根布局流，這個布局流是獨立的，不影響其外部元素的。測試時當子元素同時混有浮動元素和非浮動元素時效果并不好。IE6/7 中并不被支持。
{display:table}或{display:table-cell}當元素 display 值被設定為 table 或 table-cell 時，同樣也創建了 CSS 2.1 規范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。IE6/7 中并不被支持。
使用表格類元素作為浮動元素容器。把浮動元素匡在td里就木有浮動問題，而且木有兼容問題。當使用 TABLE TD TH 等 TABLE 系列標簽時， 元素的 display 值實際上說是 display: table 系列，這同樣也創建了 CSS 2.1 規范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。同時在 IE 6/7 中，TABLE TD TH 等 TABLE 系列標簽天然擁有 haslayout 特性。
浮動父元素。雖然這種方式并沒有兼容問題，但實際使用中并不推薦。因為很容易推斷出，頁面中只要有一個浮動元素，使用該方法清理浮動將不可避免的使頁面所有元素都浮動才可以達到預期效果。
觸發 hasLayout。下面是原文的這部分內容：
樣例：
haslayout-clear-float:{width:1px}或.haslayout-clear-float:{height:1px}或.haslayout-clear-float:{zoom:1}'Layout' 是 IE 的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其他元素的關系和相互作用，以及對應用還有使用者的影響。
'Layout' 可以被某些 CSS property（特性）不可逆的觸發，而某些 HTML 元素本身就具有 layout 。
'Layout' 在 IE 中可以通過 hasLayout 屬性來判斷一個元素是否擁有 layout ，如 object.currentStyle.hasLayout 。
'Layout' 是 IE 瀏覽器渲染引擎的一個內部組成部分。在 IE 瀏覽器中，一個元素要么自己對自身的內容進行組織和計算大小， 要么依賴于包含塊來計算尺寸和組織內容。為了協調這兩種方式的矛盾，渲染引擎采用了 'hasLayout' 屬性，屬性值可以為 true 或 false。 當一個元素的 'hasLayout' 屬性值為 true 時，我們說這個元素有一個布局（layout），或擁有布局。
,
| , | , |
|---|