有关清除浮动的问题,求解释~~_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:47:35
Original
986 people have browsed it

.clear{clear:both;}
Copy after login


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

第一个我知道什么意思但后面那个是啥意思啊,我发现将后面那个应用去清除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;}
Copy after login

效果:
如果不清除浮动那给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
Copy after login
Copy after login

在ul上,使用伪类的方式,即相当于在ul中默认添加了一个元素,使用clear:both
  • aaa
  • aaa
  • aaa
Copy after login
Copy after login

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

  • aaa
  • aaa
  • aaa
Copy after login
Copy after login

在ul上,使用伪类的方式,即相当于在ul中默认添加了一个元素,使用clear:both
  • aaa
  • aaa
  • aaa
Copy after login
Copy after login

谢谢

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!