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

大多数clearfix技术都涉及到在父容器底部添加东西，而我更喜欢伪元素方法，因为它没有将不需要的元素添加到HTML中。HTML/CSS：在中间清除浮动元素而不添加不需要的标签

但是，最近我发现我正在处理一个有一些儿童浮动但不是全部的容器。假设前两个孩子第一个漂浮在左边，第二个漂浮在右边。我需要一种方法来清除第二个元素后面的浮点，所以下面的内容不会被挤在它们之间。有没有办法清除中间浮动元素，但不添加clearfix元素？

下面是一个例子：

HTML

first child!

second child!

third child!

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看看我现在所拥有的。