html - float div 不会扩展容器

Question

我希望我的问题已经回答了很多次，但我找不到。我正在尝试在容器中创建 2 个彼此相邻的 div。但是，一旦我添加内容，它们就会溢出。我已经包含了一个 JSFiddle，但出于某种原因，我的 2 个 div 已经出现在容器之外——它不在我的本地版本中。我希望内容所在的 div 和容器一样展开。希望我已经解释清楚了。

JSFiddle

* {
margin:0px;
padding:0px;
}

body {
    background-color:#C0D498;
}

#page-wrap {
    background-color:#FFF;
    width:940px;
    margin:0 auto;
    margin-top: 40px;
    border-radius: 5px;
    padding: 20px;
}

.logo {
    width:175px;
    height:auto;
}

.banner {
    width:755px;
    height:175px;
    float:right;
    border-radius: 5px;
    background-image:url('images/banner.png');
}

.contentWrap {
    padding-bottom: 20px;
}

.contentMain {
    width:70%;
    background-color:blue;
    float:left;
}
.contentSub {
    width:30%;
    background-color:red;
    float:left;
}

Answer 1

将您的 html 替换为:

<div id="page-wrap">
    <div class="banner"></div>         
    <div class="contentWrap">
                <div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
                <div class="contentSub">g</div>
            </div>
    <div style="clear:both; float:none;"></div>
        </div>

重要的部分是:<div style="clear:both; float:none;"></div>

当然你也可以这样做(推荐)

<div class="clear"></div>

和CSS

.clear{clear:both; float:none;}