都市战狼txt下载:CSS清除浮动专题

W3C规范推荐在容器底部添加一个clear:both的元素
开篇：什么是CSS清除浮动，为什么要清除浮动？
»什么是CSS清除浮动？
网络上流行的说法是：在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
»出现浮动溢出的条件是什么？
首要条件：height:auto，或者说高度是自动伸展的。
传统观念：只有Firefox和Opera才需要进行浮动清除。
很抱歉，IE6和IE7都会。
下面这个浮动溢出的例子就是在IE6/IE7,Firefox和Opera下都会出现浮动溢出：浮动溢出的例子
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？
点击查看：浮动溢出的条件？
点击查看：清除浮动的最佳方法！
»为什么要CSS清除浮动和需要一个怎样的方法？
实现容器高度随内容自动伸缩而不受其它内外元素影响。
通过编写CSS简单实现，不用编写Javascript。
寻找一个方法：为实现浮动清除，尽量不要对容器作太多的修改。
这个方法尽量从外观样式中独立分离，不耦合于样式中，纯粹，不易受改变（健壮），可重用性强（这也是CSS好处之一）。
几个关键词[?]
容器：布局中用于把细小内容组织起来的元素，在这里指内有浮动元素，且要求自身的高度不得小于浮动元素高度的元素。
浮动层：指设置了CSS属性float为"left"或者"right"的元素。
清除浮动：实现容器高度能随其内容浮动层高度而扩展拉伸，不让浮动层溢出。
方法一（W3C规范？）：只要最底部有一个clear:both的元素？
这里的 容器2 就是红边框的最后一个元素了，且clear为both了，只是在非IE下依然不能解决问题。
如果该元素内部又出现一个浮动元素的话，就不行了，如 容器2 内的一个float:right的元素。
效果展示1：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？注：[?]Opera9.27下这里的margin-top居然不起作用，一直粘着上面的浮动层走，不过这对主要问题说明影响不大。
关于margin-top：[?] 在有浮动的情况下，元素的margin-top是从上一个非浮动的元素开始计算的。而对easyclearing.html上说到的，“从上一个clear过的元素开始计算”的说法，我有所保留。不信大家在容器 container_2 前面加些标签或者文字改变一下它的高度试试。
我认为，W3C规范说的“在容器底部添加一个可识别的clear元素”，被人们断章取义地理解错了，才会出现效果展示1这样的误会。或者Easyclearing.html就是误会之源。
正确的理解：在所有需要进行浮动清除的容器的底部添加一个可识别的clear元素。[?] 如何理解上面的话？
请看回效果展示1，“容器2”是“大容器（红边框）”里的最后一个“clear 过的、可识别的”元素。不错，但“容器2”也是容器啊，它也需要清除浮动啊，为什么不一视同仁，为“容器2”也添加一个“可识别的clear元素”？如果 新添加的这个“可识别的clear元素”内也有浮动元素呢？再添加一个，如此之般，直到人们再也不想在“可识别的clear元素”内添加浮动的东西为止， 问题不就解决了？
||－－（好啰嗦的话呀～）
基于这个理解，请看方法二。
方法二（可行）：添加一个 clear:both 的 空元素
即在容器的最后添加一个
只要这个clear元素里面什么也不放，就不会出现上面的问题啦。
效果展示2：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。这是个clear:both的空元素，为了看得出来，我还是了加点修饰。
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？这是个clear:both的空元素，为了看得出来，我还是了加点修饰。
即在容器的最后添加一个
只要这个clear元素里面什么也不放，就不会出现上面的问题啦。
不只是div，好些元素也可以用来做clear，看你怎么想了，这时在CSS中最好这样写（出自from some body I forgot）： 代码展示1：
html body .clear, html body div.clear, html body span.clear, html body li.clear, html body dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; line-height: 0; font-size: 0; } 这样写的好处是：加大clear标签的优先权不容易被覆盖；该0的是0,该是块元素的必须是块元素等强制设定，能增加稳定性，对付更多的复杂结构。
缺点1：在每个容器底部添加空元素，会增加代码的数量
缺点2（或许值得讨论）：在IE6下出现容器高损坏现象（这情况似乎未见其他人发生过，难道一直都是我代码有错？）。 图片展示1：

IE6和IE7都会有此问题。[?]但在IE7下无法从 效果展示2 中看到，因为本页满足了某个“要求”。在IE6中，可以用鼠标滚轮（或者拉动滚动条）把这个页面由上滚（拉）到下，再由下滚（拉）回 效果展示2 部分以看到。
更详细的例子请点击这里：IE6/IE7的高属性破坏现象。
这个问题我称之为broken height in IE6（或者早就有人用其它名字命名过了），解决方法就是在容器中设置 height和width不得同时为"auto"或"inherit"之一等。
背景图不为空：指“url()”括号内必须有一个字符，哪怕随便写一个，但这样不合情理。请大家有需要地选择设置 height 或 背景色 或 背景图。
»具体请看：避免高属性破坏(broken)的CSS属性设置(NEW)。
处理后也可以在IE6中通行了，请看效果展示3。
效果展示3：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。height:1% 这是个clear:both的空元素，为了看得出来，我还是了加点修饰。
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？ 这是个clear:both的空元素，为了看得出来，我还是了加点修饰。
总结：综上所述，在容器底部添加一个clear过的空元素可以很好的实现CSS浮动清除，只是在IE6中却要对容器进行一个很小的修改，只差一步就实现零耦合了。而且需要为了IE6进行两头设置，毕竟是不太方便，而方法三就干脆直接修改容器了。请继续看 方法三。
方法三（可行）：使用伪类 :after
用下面的 代码展示2 建立一个 clearfix 样式，并把它添加到容器的class中。
方法出处：Easyclearing.html
代码展示2：
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix {height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */效果展示4：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。class="clearfix"
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？class="clearfix"
class="clearfix"
正如W3C标准规范所述，如果想清除浮动，我们是不得不在容器的最后或虚（本方法）或实（方法二）地添加一个clear为 both 的元素。
这个方法对容器的处理很巧妙，但使用的hack比较多。我不喜欢hack，在非逼于无奈的情况下是不会去hack的，所以我之前一直用 方法二，但现在我更喜欢灵活运用。
方法四（有争议）：容器的overflow为auto或hidden？
效果展示5：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。overflow:auto;
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？overflow:hidden;
overflow:auto;
这是传说中的新方法，可在我的IE6中，却得到了 完全相反 的效果——浮动溢出！ 图片展示2：

你在IE6下看到的 效果展示5 会像上图（图片展示2）那样出现“浮动溢出”吗？
能，我相信，因为 容器1 和 容器2 的宽度为auto时IE6是不起作用的，具体请看回：浮动溢出的条件。
除了这些条件，在我仅能得到的Firefox2、Firefox3b4/b5及IE7中就没有其它问题。详细演示
不推荐使用此方法。 除了此方法在IE6下没效果外，还会导致另外一些问题，请看aoao的慎用 overflow。
方法五（太片面）：overflow为auto/hidden/scroll，关键是width:100%？！
该方法与 方法四 相似，也是为窗口设置overflow一个值（必须为auto/hidden/scroll当中的一个），只是说：关键在于，要把容器的宽度设为100%。 效果展示6：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。overflow:auto; width:100%;
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？overflow:hidden; width:100%;
overflow:auto; width:100%;
有人称这是世界上最简单的清除浮动方法，而我认为这方法太片面了，而且根本就不是“方法”。
对width值的设定只是一个IE6下出现浮动溢出的条件之一。
width设为100%才行，那我的400px就不行了？而且100%后，padding怎么办，margin怎么办，border怎么办？思考太不全面了。 图片展示3：

方法六（惊人发现？）：float设置为left或right！
效果展示7：
这是一个float:left的层，正常来说，它会向外溢出它接触到的父层。本层嵌套于 容器1
这是一个普通的“静态”层，没有任何与float相关的设定，叫 容器1。float:left; width:390px;
本层嵌套于容器2，设置了float:right。
这个层叫 容器2,与 容器1 区别不大，不同之处是设置了clear:both，以及上下margin都为60px。大家量一量，这里的上下margin是以哪个元素为参照的？float:left; width:390px;
float:left;
还有比这更“惊人”的发现么？
我们清除浮动的目的，是为了让容器能达到这样一个要求：即使在子层元素出现浮动的情况下，高度仍然能与子层同步扩展拉长，不会出现子层元素溢出到外部的现象。[?]
我这里的“清除浮动的目的”，如果追究起来是不严紧的，因为，就最显而易见的来说：当子元素的position为absolute时，子元素可以任意的飘。所以对这句“目的”，大家姑且简单的认为，上面只设置了浮动(float)与否，不要想太多。（或者想太多的是我自己。）
正如开篇言：清除浮动，我们要轻手轻脚地进行，尽量不要对容器有太多的干扰，这也是清除浮动的原因之一。被处理的容器是 height是auto，这也是元素的默认值，只要这样才出现高度自动拉伸的需要；相反，如果对容器的高度进行了设定，或者用JavaScript对元素 高度进行控制，就不是我们要寻找的方法了。
但是，假如我们找的不是这样一个“CSS清除浮动”方法，而是为了实现目的，那么我们就可以灵活运用列出的浮动溢出的条件了。
你的新发现？
基于我的视野与经验，似乎找不到其它完全独立于上面的新方法了，其中有很多所谓的新发现其实只不是过“浮动溢出条件”中的一些影子而已，万变不离其宗。
如果你有新发现，请与我分享。
再者，脱离了结构的CSS几乎不能存活，以我的理解是：凡事皆有一度，适可而止也。请看“最佳方法”。
清除浮动最佳方法
CSS清除浮动，就像天下间没有十全十美的人，也没有万能的机器一样——没有完美的解决清除方法，也没有一应万全的解决方案，要实现零耦合已经不可能了。
所谓团结就是力量，如果我们合理地交替地使用一些可行方法，如 方法二 和 方法三，再加上对浮动溢出的条件的运用，我们在页面制作中就不会成为单边撇子了。
jQuery的作者似乎也准备把浮动清除问题也考虑进jQuery。
怎么灵活运用法呢？请看讨论结果！