html不清除浮动不能给背景,有关清除浮动的问题，求解释~~_html/css_WEB-ITnose

.clear{clear:both;}

与

.clear{ clear:both;}.clear:after{clear: both; content: ""; display: block;}

第一个我知道什么意思但后面那个是啥意思啊，我发现将后面那个应用去清除ul中li的浮动的时候效果好明显。

看下面我的CSS代码

.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的内容长度超过100%的时候就会换行嘛，那下面那行就木有背景。清除后，浏览器怎么缩放，每个li都是有背景的。

回复讨论(解决方案)

如果不清除浮动，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,可以达到同样的效果。就好像如下代码：aaa

aaa

aaa

在ul上，使用伪类的方式，即相当于在ul中默认添加了一个元素，使用clear:both

aaa

aaa

aaa

如果不使用伪类，直接使用clear:both的话，你可以在ui中，即li的同级中添加一个空的li，在这个空的li上使用clear:both,可以达到同样的效果。就好像如下代码：aaa

aaa

aaa

在ul上，使用伪类的方式，即相当于在ul中默认添加了一个元素，使用clear:both

aaa

aaa

aaa

谢谢

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网