关于CSS float与clear属性的疑惑：伪元素清除为何无效？

我写了一段简单的HTML代码：

<html>
    <head>
        <title>Float</title>
        <style>
            .name2:after {
                content: "";
                clear: both;
                display: table;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div style="float: left; background-color: red">
                name 1
            </div>
            <div class="name2" style="float: left; background-color: blue">
                name 2
            </div>
            <div style="background-color: purple">
                name 3
            </div>
            <div style="background-color: pink">
                name 4
            </div>
        </div>
        <div>
            next line
        </div>
    </body>
</html>

运行后，name 3的div并没有跑到name 1和name 2这两个浮动div的下方，反而跟在它们右侧。但如果改成下面的写法就能实现预期效果：

.name2 + div {
    clear: both;
}

这是为什么？

原因解析 #

你给.name2:after设置clear: both，本质是给浮动的name2元素内部添加了一个伪元素，这个伪元素的clear属性只会作用在name2元素的内部——它能让name2自身的高度包含内部可能存在的浮动元素，但name2自己本身是浮动状态，这个伪元素完全属于name2，根本影响不到外面的name3元素。

而.name2 + div是直接选中name2后面紧挨着的name3元素，给这个元素设置clear: both，相当于告诉它：“你要避开前面所有的浮动元素，跑到它们下面去”，这才把清除浮动的作用落到了需要换行的目标元素上，自然就生效了。

内容的提问来源于stack exchange，提问作者Michael Schäfer