当我将我的 div 标签浮动在 HTML 中的另一个 div 中时 [重复]答案

【问题标题】：When I float my div tags inside another div in HTML [duplicate]当我将我的 div 标签浮动在 HTML 中的另一个 div 中时 [重复]
【发布时间】：2015-09-18 20:18:34
【问题描述】：

当我想将一个 div 浮动到另一个 div 中时，就会出现问题。

<div id="main">
    <div id="anotherDiv">
        <h1>Test</h1>
    </div>
</div>

这是我的样式表：

#main{ background-color:red; padding:20px; }
#anotherDiv{ background-color:blue; }

这是我没有浮动的页面：

但这是我添加以下样式时的阶梯表：

#anotherDiv{ float:left; }

但我想要这样的东西：

我能做什么？

【问题讨论】：

标签： html css

【解决方案1】：

您需要清除浮动。
这是工作小提琴：

#main{ background-color:red; padding:20px; }
#anotherDiv{ background-color:blue; }
#anotherDiv{ float:left; }

<div id="main">
    <div id="anotherDiv">
        <h1>Test</h1>
    </div>
    <div style="clear: both;"></div>
</div>

【讨论】：

【解决方案2】：

只需将overflow:auto 添加到#main：

#main {
    background-color:red;
    padding:20px;
    overflow:auto;
}

jsFiddle example

这将恢复您寻找的父 div 的行为，而无需任何不必要的 HTML 元素。

【讨论】：

【解决方案3】：

你也可以试试display: inline-block;。

DEMO

【讨论】：