一尘不染

div中的浮动元素,在div之外浮动。为什么?

html

假设您有一个div,给它一个定值width,然后在其中添加元素,在我的情况下为img另一个div

这个想法是容器的内容div将导致容器div伸展,并成为内容的背景。但是,当我这样做时,包含div的对象会缩小以适合非漂浮的对象,并且漂浮的对象将要么全部伸出,要么一半伸出,一半进入,并且对big的大小没有任何影响div

为什么是这样?有什么我想念的东西,怎么才能让漂浮的物品伸出height其中的东西div呢?


阅读 567

收藏
2020-05-10

共1个答案

一尘不染

最简单的方法是放在overflow:hidden父div上,而不指定高度:

#parent { overflow: hidden }

另一种方法是也浮动父div:

#parent { float: left; width: 100% }

另一种方法使用明确的元素:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }
2020-05-10