显示：内联块为空的clear-div添加空间

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来纠正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>

检查您更新的小提琴

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;
    }
}