Warum muss CSS Float löschen? Was ist das Prinzip des Clearings von Floats?

CSS float , eine Eigenschaft, die wir sowohl lieben als auch hassen. Ich liebe es, denn durch Floating können wir das Layout sehr bequem gestalten. Leider gibt es nach dem Floating noch zu viele Probleme, die gelöst werden müssen, insbesondere IE6-7 und darunter, die sich ohne spezielle Anweisungen auf den IE-Browser der Windows-Plattform beziehen . Float, eine Eigenschaft, die wir sowohl lieben als auch hassen. Ich liebe es, denn durch Floating können wir das Layout sehr bequem gestalten. Leider gibt es nach dem Floating noch zu viele Probleme, die gelöst werden müssen, insbesondere IE6-7 (das Folgende bezieht sich auf den IE-Browser der Windows-Plattform, sofern nicht anders angegeben). angegeben). Vielleicht haben viele Leute diese Frage: Woher kommt das Schweben? Warum löscht CSS Floats? Was ist das Prinzip des Clearings von Floats? In diesem Artikel werden die Geheimnisse Schritt für Schritt eingehend analysiert, um die Verwendung des Floatings komfortabler zu gestalten.
1. Clearing Float oder Closing Float (Enclosing Float oder Clearing Float)?
Viele Leute sind es gewohnt, es Clearing Floats zu nennen. Ich habe es schon immer so genannt, aber es ist nicht korrekt. Wir sollten den Code mit einer strengen Haltung behandeln, was uns auch helfen kann, die drei Fragen am Anfang besser zu verstehen.
1) Clear float: Das entsprechende Wort für clear ist clear: left | right
2) Close float: Die genauere Bedeutung besteht darin, das Floating zu schließen Element, wodurch die Auswirkungen des Schwebens verringert werden.
Bitte sehen Sie sich die elegante Demo für den Unterschied zwischen den beiden an.
Anhand der obigen Beispiele haben wir herausgefunden, dass der Effekt, den wir erzielen möchten, genauer darin besteht, den Float zu schließen, anstatt ihn einfach zu löschen Die Fußzeile: beides klar. Floating löst nicht das Problem des Zusammenbruchs der Warphöhe.
Fazit: Die Verwendung von Closed Float ist strenger als das Löschen von Float, daher nennen wir es im folgenden Artikel Closed Float.
2. Warum müssen wir Floats räumen?
Um diese Frage zu beantworten, müssen wir zunächst über den Positionierungsmechanismus in CSS sprechen: gewöhnlicher Fluss, Floating, absolute Positionierung (wobei „position:fixed“ eine Unterklasse von „position:absolute“ ist).
1) Gewöhnlicher Fluss: Viele Leute oder Artikel nennen es Dokumentenfluss oder gewöhnlicher Dokumentenfluss. Tatsächlich gibt es im Standard überhaupt kein solches Wort. Wenn die wörtliche Übersetzung von „Dokumentenfluss“ ins Englische „Dokumentenfluss“ lautet, gibt es im Standard nur ein anderes Wort, das als „Normalfluss“ oder „Normalfluss“ bezeichnet wird. Aber es scheint, dass jeder eher an den Fluss von Namensdokumenten gewöhnt ist, denn so stammen viele chinesisch übersetzte Bücher. Beispielsweise gibt es in „CSS Mastery“ im englischen Originalbuch nur den Begriff „normaler Fluss“ vom Anfang bis zum Ende, und der Dokumentfluss ist nie aufgetaucht.
2) Floating: Floating-Boxen können sich nach links und rechts bewegen Die äußere Kante trifft auf die Kante der umschließenden Box oder einer anderen schwebenden Box. Schwebende Boxen gehören nicht zum normalen Fluss im Dokument. Wenn ein Element schwebend ist, hat dies keinen Einfluss auf das Layout der Box auf Blockebene, sondern nur auf die Anordnung der Inline-Boxen (normalerweise Text). Das Dokument verhält sich wie folgt: Genauso wie die schwebende Box nicht existiert: Wenn die Höhe der schwebenden Box die umschließende Box überschreitet, wird die enthaltende Box nicht automatisch nach oben gedehnt, um das schwebende Element zu schließen („Höhenkollaps“-Phänomen). Wie der Name schon sagt, schwimmt es wie schwebende Wolken auf gewöhnlichen Strömungen, kann aber nur nach links und rechts schwimmen.
Gerade aufgrund dieser Eigenschaft des Floatings ist die Höhe 0 (Höhenkollaps), nachdem die Elemente im normalen Fluss schwebend sind, da sich keine anderen gewöhnlichen Flusselemente im enthaltenden Feld befinden. Im tatsächlichen Layout ist dies oft nicht das, was wir wollen, daher müssen wir das schwebende Element schließen, damit sein enthaltendes Feld eine normale Höhe aufweist.
Über die absolute Positionierung werde ich nicht viel sagen, sie fällt nicht in den Rahmen dieses Artikels und wird beim nächsten Mal aufgeschlüsselt.
3. Das Prinzip des Löschens von Floats – HasLayout- und Blockformatierungskontexte verstehen
Erster Blick auf die verschiedenen Methoden zum Löschen von Floats: (Die umfassendste CSS-Clearfix-Methode zum Löschen von Floats)
1) Zusätzliche Tags hinzufügen
Dies ist eine Methode, die uns der Lehrer in der Schule erklärt hat, indem er am Ende des schwebenden Elements ein leeres Tag hinzufügt, z. B. 0c308906e15c14386de819cc8b95b98f94b3e26ee717c64999d7867364b1b4a3, andere Tags wie br sind ebenfalls akzeptabel.

Der Code lautet wie folgt:

<p class="warp" id="float1"> 
<h2>1）添加额外标签</h2> 
<p class="main left">.main{float:left;}</p> 
<p class="side left">.side{float:right;}</p> 
<p style="clear:both;"></p> 
</p> 
<p class="footer">.footer</p>

Vorteile: Leicht zu verstehen und leicht zu beherrschen
Nachteile: Sie können sich vorstellen, wie viele bedeutungslose leere Tags durch diese Methode hinzugefügt werden. Dies verstößt gegen die Struktur und die Leistungstrennung, was bei der späteren Wartung zu einem Albtraum wird und absolut unerträglich ist. Daher wird nach dem Lesen dieses Artikels empfohlen, ihn nicht zu verwenden.
2) Verwenden Sie das br-Tag und sein eigenes HTML-Attribut
Diese Methode ist eher eine Nischenmethode, br hat das Attribut „clear="all | left | right | none"

<p class="warp" id="float2"> 
<h2>2）使用 br标签和其自身的 html属性</h2> 
<p class="main left">.main{float:left;}</p> 
<p class="side left">.side{float:right;}</p> 
<br clear="all" /> 
</p> 
<p class="footer">.footer</p>

Elegante Demo
Vorteile: Etwas stärkere Semantik als die Methode mit leeren Tags, weniger Codevolumen
Nachteile: Es verstößt auch gegen die Trennung von Struktur und Leistung und wird nicht empfohlen
3) Übergeordnetes Element Elementeinstellungen Überlauf: versteckt
Setzen Sie den Überlaufwert des übergeordneten Elements in IE6 auf versteckt. HasLayout muss ebenfalls ausgelöst werden, z. B. Zoom: 1

Der Code lautet wie folgt:

<p class="warp" id="float3" style="overflow:hidden; *zoom:1;"> 
<h2>3)父元素设置 overflow </h2> 
<p class="main left">.main{float:left;}</p> 
<p class="side left">.side{float:right;}</p> 
</p> 
<p class="footer">.footer</p>

优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了
4)父元素设置 overflow：auto 属性
同样IE6需要触发hasLayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用
5）父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
6）父元素设置display:table
优雅的 Demo
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
7）使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
该方法源自于: How To Clear Floats Without Structural Markup
原文全部代码如下:

代码如下:

<style type="text/css"> 
.clearfix:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.clearfix {display: inline-block;} /* for IE/Mac */ 
</style> 
<!--[if IE]> <style type="text/css"> 
.clearfix {zoom: 1;/* triggers hasLayout */ 
display: block;/* resets display for IE/Win */} 
</style> 
<![endif]-->

鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

代码如下:

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; }

优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
小结
通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。
在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。
CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。
那么如何触发BFC呢？
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素
需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。
fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发行为，但是没有任何官方声明。实际上，即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文，开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性，建议开发者们把这种支持当做实验性质的，更高版本的CSS可能会进一步规范这个。
BFC的特性：
1)块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
2)块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。
3)块级格式化上下文通常可以包含浮动
详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots
通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。
至此，您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了，真是因为父元素创建了新的BFC。对于张鑫旭在对《overflow与zoom”清除浮动”的一些认识 》一文中对于用包裹来解释闭合浮动的原理，我觉得是不够严谨的，而且没有依据。并且说道“Firefox等浏览器并没有haslayout的概念”，那么现代浏览器是有BFC的，从表现上来说，hasLayout 可以等同于 BFC。
IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念，由于这个显示引擎自身存在很多的缺陷，直接导致了IE6-7的很多显示 bug。当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout http://www.php.cn/ ... rties/haslayout.asp 为此被设为了 true 。IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。
触发hasLayout的条件：
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值 （例如很多人清除浮动会用到 height: 1% ）
zoom: 除 “normal” 外的任意值 (MSDN) http://www.php.cn/ ... properties/zoom.asp
writing-mode: tb-rl (MSDN) http://www.php.cn/ ... ies/writingmode.asp
在 IE7 中，overflow 也变成了一个 layout 触发器：
overflow: hidden|scroll|auto （ 这个属性在IE之前版本中没有触发 layout 的功能。 ）
overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）
hasLayout更详细的解释请参见 old9翻译的 大名鼎鼎的 《On having layout》一文（英文原文：http://www.php.cn/），由于old9博客被墙，中文版地址：
IE8使用了全新的显示引擎，据称不使用 hasLayout属性了，因此解决了很多深恶痛绝的bug。
综上所述：
在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。
四、闭合浮动方法——精益求精
上面已经列举了7种闭合浮动的方法，通过第三节分析的原理，我们发现其实更多的：display：table- cell，display：inline-block等只要触发了BFC的属性值都可以闭合浮动。从各个方面比较，after伪元素闭合浮动无疑是相对比较好的解决方案了，下面详细说说该方法。

代码如下:

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
精益求精方案一：
相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了 代码如下:

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

精益求精方案二：
由Nicolas Gallagher 大湿提出来的,原文:A new micro clearfix hack，该方法也不存在firefox中空隙的问题。

代码如下:

/* For modern browsers */ 
.cf:before,.cf:after { 
content:""; 
display:table; 
} 
.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ 
.cf { zoom:1; }

需要注意的是：
上面的方法用到了 ：before伪元素，很多人对这个有些迷惑，到底我什么时候需要用before呢？为什么方案一没有呢？其实它是用来处理margin边距重叠的，由于内部元素 float 创建了BFC，导致内部元素的margin-top和 上一个盒子的margin-bottom 发生叠加。如果这不是你所希望的，那么就可以加上before，如果只是单纯的闭合浮动，after就够了！并不是如同大漠《Clear Float》一文所说的：但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，这不是bug，是BFC应该有的特性。
在实际开发中，改进方案一由于存在Unicode字符不适合内嵌CSS的GB2312编码的页面，使用方案7完全可以解决我们的需求了，改进方案二等待大家的进一步实践。方案3、4通过overflow闭合浮动，实际上已经创建了新的 块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，清除浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是一系列的bug，比如firefox 早期版本产生 focus，截断绝对定位的层等等。始终要明白，如果单单只是需要闭合浮动，overflow就不要使用，而不是某些文章所说的“慎用”。
前前后后花了三天写完了这篇css为什么要清除浮动？ 清除浮动的原理的文章。如果觉得本文对您有帮助，您的留言就是对我最大的支持，同时由于精力有限，欢迎指出文中错误与不足，共勉之！