Question

当我使用以下代码时，最后一个div与浮动内容重叠：

<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>

常见的解决方法是：

<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>

但是，在我的情况下，我无法添加额外的元素。还有另一种解决方法吗？

修改明确：两者;修正了重叠的问题，但最后一个div有一个余量，所以它是这样的：

<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>

现在新问题是保证金没有出现。

Answer 1

你可以简单地清除花车......

<div style="background:red;clear: both;">test</div>

Answer 2

将clear属性设置为上一个<div>至left或both：

<div style="background: red; clear: left;">test</div>

编辑：至于保证金，你可以做一些相对定位：

<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>

Answer 3

尝试以下方法：

<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>

EDIT。要获得保证金顶部，请为浮动元素添加保证金底部

<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>

Answer 4

这里没有必要使用花车。制作前两个元素inline-block元素，将第三个元素作为block - 级元素。

HTML：

<div class="inline-block">
    Test
</div><div class="inline-block">
    Test
</div>

<div class="block">Test</div>

请注意，</div><div class="inline-block">正在触动。因为这两个元素是内联块元素，所以标记中的任何空格都会在演示文稿中产生空间。

CSS：

.inline-block { 
    width: 50%;
    display: inline-block; }
.block { margin: 50px 0 0; }

预览：http://jsfiddle.net/Wexcode/eGPWt/

CSS浮动导致布局问题

4 个答案: