并排的div答案

【问题标题】：side by side divs并排的div
【发布时间】：2012-12-04 20:09:55
【问题描述】：

我在一个父 div 中有 4 个 div。为了让它们并排出现，我为所有 4 个 div 赋予了 float:left 的样式。 div 确实并排出现，但父 div 的高度不会增长到包含子 div 的高度。我错过了什么？

【问题讨论】：

标签： css html

【解决方案1】：

这是浮动元素的实现引起的一个怪癖，当您的父元素只包含浮动子元素时会发生这种情况。有两种方法可以解决它。一种是将父元素的overflow 属性设置为hidden，有时称为溢出方法。另一种称为clearfix method，涉及到:after伪类的使用。

clearfix 方法的优点是允许特定定位的元素在需要时“挂”在父容器之外，但代价是一些额外的 CSS 和标记。这是我喜欢的方法，因为我经常使用悬挂元素。

【讨论】：

【解决方案2】：

在父 div 上设置 overflow: hidden;。

解释：浮动元素将它们从常规文档流中移除。因此，如果给定元素仅包含浮动元素，它将没有任何高度（或者，通过扩展，宽度 - 除非它具有块元素默认的隐式宽度）。

将溢出属性设置为隐藏告诉父元素尊重其子元素的宽度，但隐藏超出其宽度和高度的所有内容。

当然，另一种选择是在浮动 div 之后，在父级内部添加一个元素，clear: both; 这使得最后一个元素定位在所有浮动之后，在常规文档流中。由于它在父项内部，因此父项的高度是浮动项的高度，加上常规填充和清除项的高度。

【讨论】：

【解决方案3】：

在 4 个 div 之后，您需要“取消”浮动样式。这是通过创建 p 来完成的，例如：<p style="clear: both"></p> 您的父 div 将自动获得正确的大小。

【讨论】：

这不是大多数 Web 开发人员推荐的解决方案，因为它需要额外的空标记，从而使文档成为垃圾。
同意。这是垃圾。请参阅here 以获得更好的方法。

【解决方案4】：

millinet 的回答会起作用，或者您可以浮动父 div，这也将允许它扩展以包含其内容

【讨论】：

【解决方案5】：

我认为你应该给父 div 一个不固定的 100% 高度，以便它包含子 div 的高度（如果它们增长）。

【讨论】：

【解决方案6】：

我也推荐 clearfix 方法。出现此问题是因为浮动元素会删除它通常包含的任何高度。

PositionIsEverything posts a complete explanation 以及 IE6 的相应解决方案，因为旧版浏览器不支持 :after 伪选择器。

【讨论】：

【解决方案7】：

如果您希望 div 并排排列，您可以尝试使用 inline-block：

<style>
    .alldivs {
        display: inline-block;
    }
</style>

<div id="wrapper">
    <div id="div1" class="alldivs"></div>
    <div id="div2" class="alldivs"></div>
    <div id="div3" class="alldivs"></div>
    <div id="div4" class="alldivs"></div>
</div>

【讨论】：