Community Learn Tools Library Leisure

English

Home > Web Front-end > 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

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

Original

1206 people have browsed it

<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>

Copy after login

效果如下：

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

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

求原理，请大神赐教！

回复讨论(解决方案)

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

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

谢挽尊

Related labels：

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

source：php.cn

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

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