浮动div内的元素，浮动在div外。为什么？ [英] Floating elements within a div, floats outside of div. Why?

问题描述

假设你有一个div，说你的颜色为绿色，给它一个确定的宽度，当我把东西放在里面，在我的case一个img和另一个div。想法是容器div的内容将导致容器div伸展，并且是内容的背景。但是当我这样做时，包含div收缩以适应非浮动对象，并且浮动对象将要么全部出口，要么半出，一半，并且与大div的大小没有任何影响。

为什么？有没有我缺少的东西，我怎么能得到浮动的项目来拉伸包含div的高度？

解决方案

最简单的是在父div上放置 overflow：hidden ，并且不指定高度：

  #parent {overflow：hidden} 
  

另一种方法是浮动父div：

  #parent {float：left; width：100％} 
  

另一种方式使用清晰的元素：

 < div class =parent> 
< img class =floated_childsrc =.../> 
< span class =clear>< / span> 
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> span.clear {clear：left;显示：block; }


Say you have a div, say you color it green and give it a definite width, when I put stuff within it, in my case an img and another div. The idea is that the content of the container div will cause the container div to stretch out, and be a background for the contents. But when I do this, the containing div shrinks to fit the non-floating objects, and the floating objects will be either all the way out, or half out, half in, and not have any bearing on the size of the big div.

Why is this? Is there something I'm missing, and how can I get floated items to stretch out the height of a containing div?

解决方案

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

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

Another way uses a clear element:

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

CSS

span.clear { clear: left; display: block; }

这篇关于浮动div内的元素，浮动在div外。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！