Question

当它漂浮在里面时，我如何让div增加它的高度？我知道为宽度定义一个值并设置溢出到隐藏的工作。问题是我需要一个溢出可见的div。有什么想法吗？

Answer 1

包含div的

overflow:auto;使得其中的所有内容（甚至浮动的项目）都可见，外部div完全包裹它们。见这个例子：

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Answer 2

清除花车的方法不止一种。你可以在这里查看一下：
http://work.arounds.org/issue/3/clearing-floats/

例如，clear:both可能适合您

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

Answer 3

在许多情况下，overflow: auto;就足够了，但为了完成和跨浏览器支持，请查看Clearfix，它将为所有浏览器完成工作。

让我们考虑以下标记..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

以下样式..

.content { float:left; }

.clearfix { ..from link.. }

如果没有clearfix，父div就不会有高度，因为它是漂浮的孩子。 clearfix将使父母考虑浮动孩子。

Answer 4

我认为这样做的好方法是在div上设置display: table。

如何让div在高处漂浮，同时漂浮在里面

4 个答案: