请问clearfix:after清除浮动的原理？

Question

在使用after伪类清除浮动带来的影响的时候，通常都这么写：

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

想知道为什么需要前三个属性？前三个属性不设置的时候默认是怎样的？还有bootstrap这样设置的意义何在？

.row:before,.row:after{display:table;content:""}
.row:after{clear:both}

Answer 1

为了少写一个标签。

比如：

<div>
    <div style="float:right"></div>
    <div style="float:left"></div>
    <div style="clear:both"></div> // 为了清除浮动多了一个标签
</div>

为了减少无意义的元素：

<div class＝“clearfix”>
    <div style="float:right"></div>
    <div style="float:left"></div>
</div>

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

就在clearfix内容后面使用after选择加一个content充当“元素”：
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
https://developer.mozilla.org/en-US/docs/Web/CSS/content

另外你的“clearfix”并不是最佳的，应该：

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

https://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/