<分区>
大多数 clearfix 技术都涉及在父容器的最底部添加内容，我最喜欢伪元素方法，因为它不会将不需要的元素添加到 HTML 中。
但是，最近我发现我正在处理一个有一些 child 漂浮但不是全部漂浮的容器。假设前两个 child 第一个向左漂浮，第二个向右漂浮。我需要一种方法来清除第二个元素之后的 float ，这样下面的内容就不会被挤在它们之间。有没有办法在不添加clearfix元素的情况下清除中间的 float 元素？
下面是一个例子:
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看看我现在有什么。