Question

我正在开发一个html web设计。我有三个div ..一个是标题，然后是中间，页脚。所有都是1200px宽度的标题高度为150px。页脚高度为150px。我做的中间高度是自动，最小高度：500px。然后我在中间div中放置了另外两个div。两个div都是float：left。高度：汽车。现在的问题是，当这个div的内容超过500 0px的最小高度时，内容与页脚重叠......中间的大小没有增加

Answer 1

您可以使用： -

.clr{clear: both;}

<强> DEMO

OR

<强> DEMO

您也可以使用clearfix类

.clearfix:after{content:'';display:block;clear:both}

Answer 2

将此添加到您的css

// CSS

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

然后在div的浮动后添加

// HTML

   <div class="middle-content">
     <div class="sample"></div>
     <div class="sample"></div>
     <div class="clearfix"></div>
    </div>

浮动div重叠

2 个答案: