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

Question

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

Answer 1

overflow:auto;在包含div上使得其中的所有内容(甚至浮动的项目)都可见,外部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

我认为一个很好的方法是设置display: tablediv.