html - HTML/CSS：清除中间浮动元素而不添加不需要的标签

Question

大多数 clearfix 技术都涉及在父容器的最底部添加内容，我最喜欢伪元素方法，因为它不会将不需要的元素添加到 HTML 中。

但是，最近我发现我正在处理一个容器，该容器有一些漂浮但不是全部的孩子。说前两个孩子，第一个向左浮动，第二个向右浮动。我需要一种在第二个元素之后立即清除浮动的方法，这样下面的内容就不会被挤在它们之间。有没有办法清除中间的浮动元素但不添加 clearfix 元素？

下面是一个例子：

HTML

<div class="container">
    <div class="child">
        first child!
    </div>
    <div class="child">
        second child!
    </div>
    <div class="child">
        third child!
    </div>      
</div>

CSS

.container {
    width: 200px;
}

.child:nth-child(1) {
    float: left;
    background: yellow;
}

.child:nth-child(2) {
    float: right;
    background: red;
}

.child:nth-child(3) {
    background: blue;
    color: white;
}

请看这个jsfiddle看看我现在有什么。

Answer 1

只需clear: both;在^第三个元素上使用，这样您就不必<div style="clear: both;"></div>在浮动元素之后使用。

.child:nth-child(3) {
    background: blue;
    color: white;
    clear: both;
}

演示

---

此外，如果您希望清除父元素而不添加额外元素或使用overflow: hidden;这是一种肮脏的clear浮动方式，您可以class在父元素上调用 a ，具有以下属性

.clear:after {
   content: "";
   display: table;
   clear: both;
}

例如

<div class="wrapper clear">
    <div class="left_floated_div"></div>
    <div class="right_floated_div"></div>
</div>

Answer 2

添加一个明确的：两者；第三个孩子有帮助：

.child:nth-child(3) {
    background: blue;
    color: white;
    clear:both;
}

Answer 3

您必须使用clear 属性。

对于您的示例：

.child:nth-child(3) {
    clear: both;
}

在jsfiddle中。