css中的content: "." 有什么用？为什么要用他？

有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV导致不能被撑开，在应用clearfix的元素的结尾添加content中的内容，就达到了撑开容器的目的

这段代码中的content: ".";有什么用，解决了什么问题，为什么要用他？

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

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。

这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。

考虑到浏览器的兼容性问题，有时候在content：“.” 会影响到整个布局，这时候可以使用空格代替，可以起到相同的效果。