假设你有一个div，比如说你把它变成绿色并给它一个确定的宽度，当我把东西放进去时，在我的情况下是img和另一个div。 这个想法是，容器div的内容将导致容器div伸出，并成为内容的背景。 但是当我这样做时，包含的div缩小以适应非浮动对象，并且浮动对象将全部出去，或半出来一半，并且不会影响大div的大小。

为什么是这样？ 有什么我失踪了，我怎样才能浮动的项目伸出一个包含div的高度？

---

最简单的方法是将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; }

---

原因

问题在于浮动元素不在流动中：

如果元素是浮动的，绝对定位的或者是根元素，则称该元素为流出。

因此，它们不会像流入内容那样影响周围的元素。

这在9.5中进行了解释Floats：

由于浮动不在流中，所以在浮动框之前和之后创建的未定位块框垂直流动，就好像浮动不存在一样。 但是，根据需要缩短浮动框旁边创建的当前和随后的线框，以便为浮动框的边距框腾出空间。

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

---

把你的浮动div(s)放在一个div并在CSS中给它overflow:hidden;
它会正常工作。

链接地址: http://www.djcxy.com/p/7171.html

上一篇: Floating elements within a div, floats outside of div. Why?

下一篇: Best way to center a <div> on a page vertically and horizontally?