Question

以下代码会停止＆＃39; clearfix＆＃39;父元素在其两个孩子都浮动时崩溃。

有谁能告诉我它是如何工作的？

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

CSS：

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Answer 1

它等同于在末尾添加带clear: both的显式块元素：

<div>
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
    <div style="clear: both; height: 0;">&nbsp;</div>
</div>

基本上after pseudoelement将元素作为所选元素的新虚拟子元素引入，具有指定的样式。

Answer 2

clear: both - 就是这样。

“老式”（阅读：与旧浏览器兼容）的方式是通过手动添加元素，比如说：

<br style="clear:both" />

到容器的末尾。但是:after允许您在不必手动添加所述元素的情况下执行此操作。

在任何情况下，更简单的方法是将overflow:hidden应用于.clearfix元素而不是使用伪元素进行攻击，但显然取决于可能不理想的情况。

Answer 3

添加.clearfix { overflow:auto }也可以。同时避免使用clear:both的额外元素。

应该注意overflow: auto有点容易受到填充的影响，这可能会意外地生成滚动条（但你可以直观地测试它）

Answer 4

最好使用以下代码清除元素。它几乎支持每个平台上的每个浏览器。您还可以在设计HTML电子邮件时将其用于电子邮件客户端。

说明： “明确：两者”完成了大部分工作。它关闭了HTML元素的浮动功能。 “：after”是一个CSS伪元素。它在CSS选择器的末尾添加了一个“虚拟”元素。此“虚拟”元素不会出现在您的源代码中。

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

这段代码是如何阻止父母因为浮动它的孩子而崩溃的？

4 个答案: