在使用after伪类清除浮动带来的影响的时候,通常都这么写:
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
}
想知道为什么需要前三个属性?前三个属性不设置的时候默认是怎样的?还有bootstrap这样设置的意义何在?
.row:before,.row:after{display:table;content:""}
.row:after{clear:both}
为了少写一个标签。
比如:
<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/