Question

http://jsfiddle.net/55Ruh/9/。即使我输入文字，红框也不会变大。

<div class="box" style="background: red">
    <div class="lefty">Text</div>
    <div class="righty">Text</div>
</div>    

.box {
    background: red;
    width: 229px;
    color: white;
}

.lefty {
    float: left;
}

.righty {
    float: right;
}

Answer 1

http://jsfiddle.net/55Ruh/10/

Float导致元素退出文档流。

在父元素上：

zoom: 1; /* IE fix */
overflow: hidden;

Answer 2

您可以使用“清算”div解决此问题，这是一种典型方法：

http://jsfiddle.net/apDU6/

Answer 3

当容器内部只有浮动时，容器会崩溃。您需要清除它以扩展它：

<div class="box" style="background: red">
    <div class="lefty">Text</div>
    <div class="righty">Text</div>
    <div class="clear"/>
</div>    

.box {
    background: red;
    width: 229px;
    color: white;
}

.lefty {
    float: left;
}

.righty {
    float: right;
}

.clear {
    clear: both;
}

Answer 4

你可以使用PeeHaa建议的解决方案

但根据我的经验，你可以简单地将容器元素的overflew设置为auto

它也可以解决问题

Css浮动问题

4 个答案: