Heim > Web-Frontend > HTML-Tutorial > 为什么说overflow: hidden;能清除浮动呢_html/css_WEB-ITnose

为什么说overflow: hidden;能清除浮动呢_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:02:45
Original
1282 Leute haben es durchsucht

一般清除浮动用clear:both  但发现很多人用overflow: hidden来清除浮动,它的原意是隐藏多余的东西,为什么它能清除浮动呢


回复讨论(解决方案)

是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-block, table-cell和table-caption都不是块级样式,所以才会用到clear来控制浮动overflow也可以清除浮动是因为当在父级元素设置overflow时候,除了visible,就是只有auto, hidden或者scroll时候,也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果具体信息可以在这里看虽然clear是旧的方式,但还是推荐用clear来做,有些情况会比overflow处理的要好

overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。而clear:both则是采用的是在子级清除浮动。你看看使用的位置就清楚了。

<div style="overflow:hidden">   <div style="float:left"></div></div>
Nach dem Login kopieren
Nach dem Login kopieren


<div >   <div style="float:left"></div>  <div style="style="clear:both""></div></div>
Nach dem Login kopieren
Nach dem Login kopieren

是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-block, table-cell和table-caption都不是块级样式,所以才会用到clear来控制浮动overflow也可以清除浮动是因为当在父级元素设置overflow时候,除了visible,就是只有auto, hidden或者scroll时候,也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果具体信息可以在这里看虽然clear是旧的方式,但还是推荐用clear来做,有些情况会比overflow处理的要好


我真想操你全家!

overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。而clear:both则是采用的是在子级清除浮动。你看看使用的位置就清楚了。

<div style="overflow:hidden">   <div style="float:left"></div></div>
Nach dem Login kopieren
Nach dem Login kopieren


<div >   <div style="float:left"></div>  <div style="style="clear:both""></div></div>
Nach dem Login kopieren
Nach dem Login kopieren


不明白啊,如果仍然没清除浮动的话,难道那父级就不算紧贴内容了吗?
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage