初学前端，对于前端的理解不是很深，往往会犯很多错误，其实更多的错误反而更容易加深理解
图1如下
图1
出现了图2的情况
图2
看到这种情况应该属于清除浮动失败引起的。
然后我尝试着将代码中点红色部分注释，用了最常用的几个清除浮动的办法，比如给div加深样式clear:both或者overflow：hidden等方法都能够去除浮动，唯独代码中给ul加：after清除浮动的办法不行。
然后开始排查是不是：after使用失败的原因，但是好像不是这个原因，所以我就查找了资料发现了一个原因，那就是我对：after层级问题理解错误了。我将：after属于的DOM层理解与ul平级的DOM层了，所以这也是我错误的真正原因。其实伪元素作为DOM层，是在容器内进行渲染的，而非在容器外。
作为DOM元素，伪元素都是在容器内进行渲染的
解决办法（1）是给ul加了一个父类div，然后该父类设置class为cl，这样就能将：after伪元素在容器内渲染了，从而清除浮动。
图3
方法二是将ul的float属性去除。
最后显示正常为图4
图4
关于：after使用的几点：
（1）：after这个伪元素属于行内元素，不过可以使用属性 display 改变这一点。
（2）所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。
代码：图5
图5
效果
这样可以证明了：after伪元素属于行内元素，并且是在h1容器内部进行渲染的
