Question

我在这里有一些旧代码，其中<div class="clear">元素用于清除浮动元素：

.teaser {
    background: lightblue;
    .text {
        background: green;
    }
    .clear {
        display: inline-block;
        width: 100%;
        clear: both;
    }
}

问题是，display: inline-block;在最后为方框增加了一些空间。现在我知道这是一个常见问题，但我尝试了一切：

vertical-align: top;（和overflow: hidden;）
height: 0;
font-size: 0;
line-height: 0;
margin-bottom: -10px;

jsFiddle

我错过了什么？

Answer 1

您可以添加以下任一项来纠正display: inline-block问题：

元素之间的HTML注释
每个元素margin-right: -4px;

除此之外，我建议使用标准的clearfix方法清除浮动：

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

.clearfix:after {
    clear: both;
}

Answer 2

在结束标记后添加<div class="clear">。像这样 -

<div class="teaser">
    <div class="content line_bottom">

        <h4>WM 2014 in Brasilien beginnt unter optimalen Bedingungen für Deutsches Team</h4>

        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div><div class="clear">
    </div>
</div>

检查更新后的fiddle

Answer 3

由于内联块浮动清除器可能会导致一些问题，我建议你使用一点溢出 - 明确的技巧。演示：http://jsfiddle.net/rJZBS/5/

<div class="teaser">
    <div class="content line_bottom">
        <h4>Title</h4>

            <div class="text">
                Some text.
            </div>
        </div>
</div>

CSS：

.teaser {
    background: lightblue;
    overflow: hidden;
    .text {
        background: green;
    }
}

display：inline-block为空clear-div添加空格

3 个答案: