请问在div里写加before和after又没加什么特殊的处理的意义是什么

周梦康
  • 8.9k

阿里云首页看到很多div都有加上:before:after的属性.
但是大都只是做了类似的如下处理,请问这样的意义是什么呢?

.y-clearfix:before, .y-clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}

为什么不是在div里插入一个空div,然后把这些属性放在那个空div上,而是要使用beforeafter呢?
希望css大神帮忙来扫盲.

回复
阅读 8.8k
4 个回答
StephenLi
  • 7k
✓ 已被采纳

根据类名 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 的属性。
其实之前我清除浮动使用的是其他的方法,但是我看到这个类名就觉得应该是与清除浮动有关,所以测试了下,果不其然,希望答案对梦康兄有帮助。:)

html是用来描述信息的。

用空div标签和用伪元素来清除浮动的效果是一样的,但是,空的div标签在整个文档结构上没有任何意义,这是html代码优化时需要规避的细节。题主可以看看http://www.iplaysoft.com/,文章预览图hover效果的蓝色遮层也是用伪元素定义的,这样html部分就不会有冗余的空标签了。

这不就是插个空的div的原理照搬过来的么。
只不过,我们可以用更高级的用法了啊。

宣传栏