转载的清除浮动_html/css_WEB-ITnose
总结一下：
-
{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），或拥有布局。
<html>, <body><table>, <tr>, <th>, <td><img alt="转载的清除浮动_html/css_WEB-ITnose" ><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>
display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 normal 外任意值)
min-height: (任意值)min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed
注意兼容问题：
haslayout 特性仅 IE 支持，其他浏览器并无此特性。可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在，IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。
注：IE hasLayout 特性厂商说明链接：hasLayout Property
以上内容是常见清理浮动手段生效的规范（和浏览器厂商特性）原理。我们希望页面开发者们，根据他们的兼容性特征以及实际情况来组合使用，以便达到实际项目目标。
建议
对于初学者我们推荐如下方式之一来清理浮动元素，它们均相对简单可靠：
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
＆gt; gt;的目的是什麼 元素？
Mar 21, 2025 pm 12:34 PM
本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati
＆lt; datalist＆gt;的目的是什麼。 元素？
Mar 21, 2025 pm 12:33 PM
本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159
＆lt; meter＆gt;的目的是什麼。 元素？
Mar 21, 2025 pm 12:35 PM
本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前
視口元標籤是什麼？為什麼對響應式設計很重要？
Mar 20, 2025 pm 05:56 PM
本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。
HTML容易為初學者學習嗎？
Apr 07, 2025 am 12:11 AM
HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？
Mar 20, 2025 pm 06:05 PM
本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
HTML中起始標籤的示例是什麼？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
