Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > HTML-Tutorial > 在一个容器中有一个float:left的img和一个无float的div，为什么div加上overflow:hidden就能实现和img左右分开的效果？_html/css_WEB-ITnose

在一个容器中有一个float:left的img和一个无float的div，为什么div加上overflow:hidden就能实现和img左右分开的效果？_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-21 09:22:17

Original

1206 Leute haben es durchsucht

<div class="container">    <img    style="max-width:90%" src="xx.jpg" / alt="在一个容器中有一个float:left的img和一个无float的div，为什么div加上overflow:hidden就能实现和img左右分开的效果？_html/css_WEB-ITnose" >    <div style="overflow:hidden">123</div></div>

Nach dem Login kopieren

效果如下：

并且div会占据除了img的宽度以外的所有右侧宽度。如果不加overflow:hidden，效果如下：

如果给div添加float:left也能达到上面的效果，但是div必须设置宽度，否则不能占满右侧宽度。

求原理，请大神赐教！

回复讨论(解决方案)

已经解决了。因为overflow:hidden使得div产生了BFC效果。详细请搜索 “CSS BFC”

有人回复吗？回复就结帖了

谢挽尊

Verwandte Etiketten：

在一个容器中有一个float:left的img和一个无float的div，为什么div加上overflow:hidden

Quelle：php.cn

Vorheriger Artikel：帅锅，美旅留步，请教一个关于select中option的问题_html/css_WEB-ITnose Nächster Artikel：如何让导航的图框（如图第二个）向右移？_html/css_WEB-ITnose

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

Neueste Artikel des Autors