在阿里云首页看到很多div都有加上:before
和:after
的属性.
但是大都只是做了类似的如下处理,请问这样的意义是什么呢?
.y-clearfix:before, .y-clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
为什么不是在div
里插入一个空div
,然后把这些属性放在那个空div
上,而是要使用before
和after
呢?
希望css大神帮忙来扫盲.
==================================================================================
根据类名 y-clearfix
来推测这应该是为了清除浮动元素在 y
方向的影响。
写个 demo
来测试下:
<style>
div {
border: 1px solid #ccc;
}
</style>
<div>A
<div style="float: left;height: 50px;">B</div>
</div>
由于父容器内有了浮动元素 div
的缘故,导致父容器的高度不能再自适应,因为浮动元素已经脱离了正常的文档流,现在我们添加上这个类 .y-clearfix
。
<style>
div {
border: 1px solid #ccc;
}
.y-clearfix:before, .y-clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
clear: both;
}
</style>
<div class="y-clearfix">A
<div style="float: left;height: 50px;">B</div>
</div>
父容器高度恢复正常,清除浮动成功,但是不要忘了还要加上一个 clear: both
的属性。
其实之前我清除浮动使用的是其他的方法,但是我看到这个类名就觉得应该是与清除浮动有关,所以测试了下,果不其然,希望答案对梦康兄有帮助。:)