CSS float div 无法正常工作

Question

我有一个名为 main 的容器 div，然后有两个 div 向左浮动。问题是我需要主 div 背景颜色可见(我认为蓝色背景应该在右侧(剩余 300px)和中 div 的第 4 行可见，因为它比左侧 div 低).我还需要左侧和中部 div 自动增加它们的自动换行高度，如您所见，它在灰色(中间)div 中不起作用。

参见 http://jsfiddle.net/djqfo3we/2/

.main {
    width: 500px;
    background-color: blue;
}

.left {
    width: 100px;
    float: left;
    background-color: red;
}
.middle {
    width: 100px;
    float: left;
    background-color: gray;
}

<div class="main">
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
    <div class="middle">wfwefwef  jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>

Answer 1

您必须清除 float ，否则父级的边距会塌陷，看起来父级没有高度。

清除 float 的技巧多种多样，简单搜索即可了解更多

至于文本换行，正如您所发现的，长文本字符串不会自行中断。

您可以使用 word-wrap:break-word 强制分词并保持原始文本不变。

.main {
    width: 500px;
    background-color: blue;
    overflow: hidden;     /* quick clearfix */
}
.left {
    width: 100px;
    float: left;
    background-color: red;
}
.middle {
    width: 100px;
    float: left;
    background-color: gray;
    word-wrap:break-word;
}

<div class="main">
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
    <div class="middle">wfwefwef  jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>