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

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: " " 中的空白是否被 Web 浏览器完全忽略？

Answer 1

为什么 clearfix 不破解清除浮动元素？

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

content: " " 中的空白是否被 Web 浏览器完全忽略？

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

 .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;
}

 <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>

如果您想清除浮动，您所要做的就是在浮动本身上设置clear，按照该属性的预期使用方式。您无需求助于 clearfix hack。

Answer 2

根据前面的答案，要使技巧奏效，您必须使用 .hack 类创建一个令人上瘾的 div（请参阅 sn-p）。

.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 破解：

1. 创建父元素
2. 添加浮动元素
3. 将clearfix 类应用于父级（在#1 中说明）

示例：

.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;
}

  <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>

如果您不清除浮动，则它不会被视为正常文档流的一部分。浮动元素仅以这种方式运行。