Question

我一直在学习csstricks的clearfix hack。在The Easy Clearing Methos。我发现它表现得非常不合适。他们建议代码：

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

首先，我试过它;它什么都不清楚。然后我用一个空格作为内容（content: " "）;什么都没有清除。然后我使用了一个字符作为内容content: "H"。 H出现在浮动div的上方和下方，但没有清除任何内容。以下是我在代码后使用的代码：

Content: ""

 .rowx div:nth-of-type(even) {
   background-color: darkgray;
 }
 .rowx div:nth-of-type(odd) {
   background-color: lightgray;
 }
 .hack:after,
 .hack:before {
   content: "";
   clear: both;
   display: block;
 }
 .fitty {
   width: 20%;
   float: left;
 }

 <div class="rowx">
    <div class="fitty">.col-xs-4 </div>
    <div class="fitty hack">.col-xs-4</div>
 
    <div class="fitty">.col-xs-4</div>
    <div class="fitty">.col-xs-4 </div>
  </div>

Content: " "

 .rowx div:nth-of-type(even) {
  background-color: darkgray; 
}

.rowx div:nth-of-type(odd) {
  background-color: lightgray; 
}

.hack:after, .hack:before {
  content: " "; clear: both; display: block; 
}
.fitty {
  width: 20%; float: left;
}

 <div class="rowx">
    <div class="fitty">.col-xs-4 </div>
    <div class="fitty hack">.col-xs-4</div>
 
    <div class="fitty">.col-xs-4</div>
    <div class="fitty">.col-xs-4 </div>
  </div>

Content: "H"

 .rowx div:nth-of-type(even) {
   background-color: darkgray;
 }
 .rowx div:nth-of-type(odd) {
   background-color: lightgray;
 }
 .hack:after,
 .hack:before {
   content: "H";
   clear: both;
   display: block;
 }
 .fitty {
   width: 20%;
   float: left;
 }

  <div class="rowx">
    <div class="fitty">.col-xs-4 </div>
    <div class="fitty hack">.col-xs-4</div>
 
    <div class="fitty">.col-xs-4</div>
    <div class="fitty">.col-xs-4 </div>
  </div>

问题：

为什么clearfix不能清除浮动元素？
网络浏览器是否完全忽略content: " "中的空格？

Answer 1

为什么clearfix黑客清除浮动元素？

每个浮动生成自己的block formatting context。一个块格式化上下文cannot clear floats in another block formatting context中的元素（或伪元素）。在您的示例中，基本上没有要清除的任何clearfix的浮点数，并且浮点数本身不被任何东西清除。换句话说，你的任何一个例子都没有绝对的清除。

网络浏览器是否完全忽略content: " "中的空格？

content属性中的空格由CSS2.1规范的section 16.6.1中的相同空白处理规则通过white-space属性控制。块框中的单独空格被视为无关紧要并被折叠掉，因此即使使用content: " "，伪元素也会变为空，但如果设置white-space: pre，您将看到它们：

＆＃13;

 .rowx div:nth-of-type(even) {
  background-color: darkgray; 
}

.rowx div:nth-of-type(odd) {
  background-color: lightgray; 
}

.hack:after, .hack:before {
  content: " "; clear: both; display: block; white-space: pre;
}
.fitty {
  width: 20%; float: left;
}

＆＃13;

 <div class="rowx">
    <div class="fitty">.col-xs-4 </div>
    <div class="fitty hack">.col-xs-4</div>
 
    <div class="fitty">.col-xs-4</div>
    <div class="fitty">.col-xs-4 </div>
  </div>

＆＃13;

如果您正在尝试清除浮动，那么您所要做的就是在浮动自身上设置clear，就像要使用该属性一样。你不需要求助于clearfix hacks。

Answer 2

除了前面的答案之外，为了使这个技巧发挥作用，你必须用类.hack创建一个上瘾的div（参见片段）。

.rowx div:nth-of-type(even) {
   background-color: darkgray;
 }
 .rowx div:nth-of-type(odd) {
   background-color: lightgray;
 }
 .hack:after,
 .hack:before {
   content: "";
   clear: both;
   display: block;
 }
 .fitty {
   width: 20%;
   float: left;
 }

<div class="rowx">
    <div class="fitty">.col-xs-4 </div>
    <div class="fitty ">.col-xs-4</div>
<div class="hack"></div>
  <div class="fitty">.col-xs-4</div>
    <div class="fitty">.col-xs-4 </div>
  </div>

Answer 3

Clearfix hack：

创建父元素
添加Floated elemets
将clearfix课程应用于家长（在＃1中说明）

示例：

＆＃13;
＆＃13;
.clearfix:after { content: ''; display: table; clear: both; } .FL { float: left; } .FR { float: right; } .WithHack { background: steelblue; padding: 20px; border: solid 1px black; } .WithHack div { border: solid 1px red; } .WithOutHack { background: yellowgreen; padding: 20px; border: solid 1px black; } .WithOutHack div { border: solid 1px red; }
＆＃13;
<div class="WithHack clearfix"> <div class="FL">I'm on Left</div> <div class="FR">I'm on Right</div> </div> <div class="WithOutHack"> <div class="FL">I'm on Left</div> <div class="FR">I'm on Right</div> </div>
＆＃13;
＆＃13;
＆＃13;

如果您不清除浮动，则不会将其视为正常文档流程的一部分。浮动元素仅以这种方式表现。

内容中是否有空格：“”在clearfix hack中被忽略了？

3 个答案: