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;了3 ^次元,这样你就不必使用<div style="clear: both;"></div>浮动元素之后.

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

演示

此外,如果您想要在不添加额外元素的情况下清除父元素或使用overflow: hidden;哪个是clear浮动的脏方法,则可以class使用以下属性调用父元素

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

例如

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