尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.

例如:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.

你怎么解决这个问题？

我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.

解决方案1

浮动父母.

<div style="float: left;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？

解决方案2

给父母一个明确的高度.

<div style="height: 300px;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.

解决方案3

在父元素中添加"spacer"元素,如下所示:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
  <div …

我对网页的一个常见问题是浮动div在其容器外蔓延.

#wrapper{
    border:1px solid red;
}

#wrapper div{
    float:left;
    font-size: 3em;
}
...
<div id="wrapper">
    <div>Hello World</div>
</div>

实例:http://jsfiddle.net/ugUVa/1/

有很多肮脏的方法来解决这个问题(插入一个明确的div:两者)

我看到的一个更简洁的解决方案是将包装器divs溢出样式设置为隐藏:

示例:http://jsfiddle.net/ugUVa/2/

这适用于各种浏览器,非常干净,没有额外的标记.我很高兴,但我不知道为什么它有效!

我查看的所有文档都表明溢出:隐藏是隐藏内容,而不是调整父级的大小以适应其子级...

有人可以为这种行为提供解释吗？

谢谢

正如您将看到的,我有一个div(#innerPageWrapper)包含包含内容的div.#innerPageWrapper也可以在视觉上作为布局中的半透明边框.

我的问题是#innerPageWrapper不会扩展以适应内部的孩子,更不用说扩展以填充页面的其余部分.

这是代码 #innerPageWrapper

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

我尝试过很多东西(包括使用calc()来获得div高度).我想避免使用jQuery.