溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css有哪些清除浮動的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css有哪些清除浮動的方法”吧!
1、{clear:both;}設置了clear 屬性的元素，其上邊框位置會緊貼浮動元素的 margin-bottom 邊界位置渲染，使包含浮動元素的容器高度正常。所以適用于浮動元素后面容器之內有個非浮動元素，或是額外添加一個新的空元素。
2、.after-clear-float :after{content:""; display:block; clear:both;}利用偽類添加新元素，原理同上，所以只適用于父容器最后一級子元素是浮動的，即浮動元素后面沒有非浮動元素把它和父容器隔開。只是IE6/7不支持:after 偽元素。
3、{overflow:hidden;}或overflow:auto;創建了overflow 樣式值為非visilbe的元素，實際上是創建了 CSS 2.1 規范定義的 Block Formatting Contexts，會重新計算其內部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動元素高度。這個名詞過于晦澀，在 CSS 3 草案中被變更為名詞 Root Flow，顧名思義，是創建了一個新的根布局流，這個布局流是獨立的，不影響其外部元素的。測試時當子元素同時混有浮動元素和非浮動元素時效果并不好。IE6/7 中并不被支持。
4、{display:table}或{display:table-cell}當元素 display 值被設定為 table 或 table-cell 時，同樣也創建了 CSS 2.1 規范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。IE6/7 中并不被支持。
5、使用表格類元素作為浮動元素容器。把浮動元素匡在td里就木有浮動問題，而且木有兼容問題。當使用 TABLE TD TH 等 TABLE 系列標簽時， 元素的 display 值實際上說是 display: table 系列，這同樣也創建了 CSS 2.1 規范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。同時在 IE 6/7 中，TABLE TD TH 等 TABLE 系列標簽天然擁有 haslayout 特性。
6、浮動父元素。雖然這種方式并沒有兼容問題，但實際使用中并不推薦。因為很容易推斷出，頁面中只要有一個浮動元素，使用該方法清理浮動將不可避免的使頁面所有元素都浮動才可以達到預期效果。
7、觸發 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），或擁有布局。
默認擁有布局的元素：
代碼如下:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
可觸發 hasLayout 的 CSS 特性：
代碼如下:
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
IE7 還有一些額外的屬性(不完全列表)可以觸發 hasLayout ：
代碼如下:
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用于塊級元素)
overflow-x: (除 visible 外任意值，僅用于塊級元素)
overflow-y: (除 visible 外任意值，僅用于塊級元素)
position: fixed
IE6 以前的版本（也包括 IE6 及以后所有版本的混雜模式，其實這種混雜模式在渲染方面就相當于 IE 5.5）， 通過設置任何元素的 'width' 或 'height'（非auto）都可以觸發 hasLayout ； 但在 IE6 和 IE7 的標準模式中的行內元素上卻不行，設置 'display:inline-block' 才可以。
注意兼容問題：
haslayout 特性僅 IE 支持，其他瀏覽器并無此特性。可以依靠計算布局清理浮動的 haslayout 特性僅在 IE 6/7 中存在，IE8 之后將使用 CSS 2.1 的 Block Formatting Contexts 定義來達到同樣效果。
注：IE hasLayout 特性廠商說明鏈接：hasLayout Property
以上內容是常見清理浮動手段生效的規范（和瀏覽器廠商特性）原理。我們希望頁面開發者們，根據他們的兼容性特征以及實際情況來組合使用，以便達到實際項目目標。
建議
對于初學者我們推薦如下方式之一來清理浮動元素，它們均相對簡單可靠：
采用一個HTML標簽，以及css的clear屬性，來手工清理浮動；
為元素設置 overflow:hidden 或 overflow:auto 值，配合可以設置 zoom:1 樣式觸發 IE6 haslayout 特性，來達到兼容所有瀏覽器清理浮動的目的。
采用偽元素:after，配合可以設置 zoom:1 樣式觸發 IE6/7 haslayout 特性，來達到兼容所有瀏覽器清理浮動的目的。
到此，相信大家對“css有哪些清除浮動的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
