本篇內(nèi)容主要講解“css有哪些清除浮動(dòng)的方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css有哪些清除浮動(dòng)的方法”吧!
1、{clear:both;}設(shè)置了clear 屬性的元素，其上邊框位置會(huì)緊貼浮動(dòng)元素的 margin-bottom 邊界位置渲染，使包含浮動(dòng)元素的容器高度正常。所以適用于浮動(dòng)元素后面容器之內(nèi)有個(gè)非浮動(dòng)元素，或是額外添加一個(gè)新的空元素。
2、.after-clear-float :after{content:""; display:block; clear:both;}利用偽類添加新元素，原理同上，所以只適用于父容器最后一級(jí)子元素是浮動(dòng)的，即浮動(dòng)元素后面沒(méi)有非浮動(dòng)元素把它和父容器隔開。只是IE6/7不支持:after 偽元素。
3、{overflow:hidden;}或overflow:auto;創(chuàng)建了overflow 樣式值為非visilbe的元素，實(shí)際上是創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts，會(huì)重新計(jì)算其內(nèi)部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動(dòng)元素高度。這個(gè)名詞過(guò)于晦澀，在 CSS 3 草案中被變更為名詞 Root Flow，顧名思義，是創(chuàng)建了一個(gè)新的根布局流，這個(gè)布局流是獨(dú)立的，不影響其外部元素的。測(cè)試時(shí)當(dāng)子元素同時(shí)混有浮動(dòng)元素和非浮動(dòng)元素時(shí)效果并不好。IE6/7 中并不被支持。
4、{display:table}或{display:table-cell}當(dāng)元素 display 值被設(shè)定為 table 或 table-cell 時(shí)，同樣也創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動(dòng)元素高度。IE6/7 中并不被支持。
5、使用表格類元素作為浮動(dòng)元素容器。把浮動(dòng)元素匡在td里就木有浮動(dòng)問(wèn)題，而且木有兼容問(wèn)題。當(dāng)使用 TABLE TD TH 等 TABLE 系列標(biāo)簽時(shí)， 元素的 display 值實(shí)際上說(shuō)是 display: table 系列，這同樣也創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動(dòng)元素高度。同時(shí)在 IE 6/7 中，TABLE TD TH 等 TABLE 系列標(biāo)簽天然擁有 haslayout 特性。
6、浮動(dòng)父元素。雖然這種方式并沒(méi)有兼容問(wèn)題，但實(shí)際使用中并不推薦。因?yàn)楹苋菀淄茢喑?，?yè)面中只要有一個(gè)浮動(dòng)元素，使用該方法清理浮動(dòng)將不可避免的使頁(yè)面所有元素都浮動(dòng)才可以達(dá)到預(yù)期效果。
7、觸發(fā) hasLayout。下面是原文的這部分內(nèi)容：
樣例：
代碼如下:
haslayout-clear-float:{width:1px}
或
代碼如下:
.haslayout-clear-float:{height:1px}
或
代碼如下:
.haslayout-clear-float:{zoom:1}
'Layout' 是 IE 的專有概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位和尺寸計(jì)算，與其他元素的關(guān)系和相互作用，以及對(duì)應(yīng)用還有使用者的影響。
'Layout' 可以被某些 CSS property（特性）不可逆的觸發(fā)，而某些 HTML 元素本身就具有 layout 。
'Layout' 在 IE 中可以通過(guò) hasLayout 屬性來(lái)判斷一個(gè)元素是否擁有 layout ，如 object.currentStyle.hasLayout 。
'Layout' 是 IE 瀏覽器渲染引擎的一個(gè)內(nèi)部組成部分。在 IE 瀏覽器中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行組織和計(jì)算大小， 要么依賴于包含塊來(lái)計(jì)算尺寸和組織內(nèi)容。為了協(xié)調(diào)這兩種方式的矛盾，渲染引擎采用了 'hasLayout' 屬性，屬性值可以為 true 或 false。 當(dāng)一個(gè)元素的 'hasLayout' 屬性值為 true 時(shí)，我們說(shuō)這個(gè)元素有一個(gè)布局（layout），或擁有布局。
默認(rèn)擁有布局的元素：
代碼如下:
,
| , | , |
|---|
重慶分公司
重慶分公司