有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV导致不能被撑开,在应用clearfix的元素的结尾添加content中的内容,就达到了撑开容器的目的
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。
这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。
考虑到浏览器的兼容性问题,有时候在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:“.” 会影响到整个布局,这时候可以使用空格代替,可以起到相同的效果。