浮动div重叠答案

【问题标题】：Floating div overlapping浮动div重叠
【发布时间】：2018-04-24 10:03:30
【问题描述】：

我正在做一个 html 网页设计。我有三个 div .. 一个是页眉，然后是中间，页脚。所有都是 1200px 宽度的标题有 150px 的高度。页脚的高度为 150 像素。我把中间的高度设为自动，最小高度：500px。然后我在中间的 div 中放置了另外两个 div。两个 div 都是浮动的：左。高度：自动。现在的问题是，当这个 div 的 contant 超过 500 0px 的最小高度时，contant 与页脚重叠......中间的大小没有增加

【问题讨论】：

发布一些代码，以便人们可以帮助您...小提琴？
请添加您的代码。
听起来你需要clear 中间容器中的divs。
尝试对 div 使用 display:block 和 clear:both。如果你显示代码会更好

标签： html css position css-float

【解决方案1】：

你可以使用：-

.clr{clear: both;}

DEMO

或

DEMO

你也可以使用 clearfix 类

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

【讨论】：

【解决方案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的float之后添加

//HTML

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

【讨论】：