.clear{clear:both;}.clear{ clear:both;}.clear:after{ clear: both; content: ""; display: block;}.bookrack_content_ul { width: 100%; background:url(../images/indexPage/ul_bg.png) repeat;}.bookrack_content_li { float: left; margin-top:36px; margin-left:37px; margin-bottom:11px;} 如果不清除浮动，ul不能够完全“包裹住”浮动的子元素li。浮动的li会脱离文档流，而不被ui包裹。
如果ul使用了清除浮动，则ul,可以将浮动的子元素li“包裹住”，所以换行后li还会有背景。
如果不清除浮动，ul不能够完全“包裹住”浮动的子元素li。浮动的li会脱离文档流，而不被ui包裹。
如果ul使用了清除浮动，则ul,可以将浮动的子元素li“包裹住”，所以换行后li还会有背景。
那能不能直接使用clear：both呢，为啥要使用后面那个有伪类的东东
如果不使用伪类，直接使用clear:both的话，你可以在ui中，即li的同级中添加一个空的li，在这个空的li上使用clear:both,可以达到同样的效果。就好像如下代码：
<div class="wrapper"> <ul class="bookrack_content_ul"> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> <li class="clearfix"></li><!--注意clearfix是用在这个地方的,在去掉伪类的情况下也可以正常使用！！！--> </ul></div>
<div class="wrapper"> <ul class="bookrack_content_ul clearfix"><!--注意clearfix是用在这个地方的，需要使用伪类才可以使用--> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> </ul></div>
如果不使用伪类，直接使用clear:both的话，你可以在ui中，即li的同级中添加一个空的li，在这个空的li上使用clear:both,可以达到同样的效果。就好像如下代码：
<div class="wrapper"> <ul class="bookrack_content_ul"> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> <li class="clearfix"></li><!--注意clearfix是用在这个地方的,在去掉伪类的情况下也可以正常使用！！！--> </ul></div>
<div class="wrapper"> <ul class="bookrack_content_ul clearfix"><!--注意clearfix是用在这个地方的，需要使用伪类才可以使用--> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> <li class="bookrack_content_li">aaa</li> </ul></div>
