如何让div在内部漂浮时增加高度

121

当div内部漂浮时，如何增加其高度？我知道为宽度定义一个值并将溢出设置为隐藏工作。问题是我需要一个可见溢出的div。有任何想法吗？

— 佩德罗扎特
source

278

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>

展开摘要

— 杰克·巴黎
source

7

是的，它有点用，但是有产生滚动条的危险..对吗？

— pedrozath 2011年

1

不，我不知道@pedro。外部div应该保持扩展以包裹内部div。在小提琴中尝试一下，增加内部div的尺寸，看看会发生什么。

— JakeParis 2011年

2

我尝试过这个，浏览器窗口的右侧出现了一个约2em高的小滚动条。

— Nigel Alderton

1

@NigelAlderton这对我来说是发生了，因为我强迫容器的高度（overflow添加容器的高度）。通过overflow: auto;从班级以及height选择器中移除进行了修复

— -eggy

16

有多种清除浮标的方法。您可以在此处进行检查：http :
//work.arounds.org/issue/3/clearing-floats/

例如，clear:both可能对您有用

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

#element { zoom:1; }

— 尼基塔·雷巴克（Nikita Rybak）
source

1

这种方法的好处是overflow: auto;可以裁剪在元素外部溢出的内容（例如焦点装饰），但是不会。

— 丹丹（Dan

溢出：自动为我创建了一个水平滚动条，所以我无法使用它。这工作得很好。

— Edwin Stoteler

正是我想要的。将此CSS应用于父级。它扩展了父<div>的高度，因此浮动元素保留在其中。优雅，因为它明确指出：“父母的底部必须清除浮标。”

— IAM_AL_X

12

在很多情况下，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将使父级考虑浮动子级。

— 米菲
source

2

Clearfix是额外的标记。只需给父div加价即可overflow: auto;

— JakeParis 2011年

7

我认为display: table在div上进行设置是一种很好的方法。

— 佩德罗扎特
source