Html CSS:：伪元素清除后不工作

这是一把小提琴：

处理响应性布局。我希望：after伪元素将清除float和class.masthead middle元素，但它不会下降到下一行。如果我说清楚：两者都有；在报头中间的元素上，我可以这样做，但我不明白为什么浮动不能基于：after清除。after伪元素将使用媒体查询添加，但我无法让它在“标准”css中工作

以下是HTML：

<header>
    <div class="header-inner">
        <div class="masthead">
            <div class="masthead-inner">
                <div class="masthead-left">LEFT</div>
                <div class="masthead-right">RIGHT</div>
                <div class="masthead-middle">MIDDLE</div>
            </div>
        </div>
    </div>
</header>

---

clear:on
上的两个
：：在

之后使用伪元素以清除父元素末尾的浮动（子元素）

---

如果您想阻止某个元素包装浮动，您应该为该元素本身提供

clear:tware

声明。

下面是一个带有片段的答案，以说明我的评论

标题{
位置：相对位置；
宽度：100%；
填充顶部：10px；
}
收割台，收割台内部{
宽度：100%；
框大小：边框框；
保证金：0自动；
填充：0 10px；
}
报头，报头{
位置：相对位置；
宽度：100%；
框大小：边框框；
}
收割台。桅顶。桅顶内侧{
位置：相对位置；
宽度：100%；
框大小：边框框；
溢出：隐藏；
}
报头，报头，报头左侧{
位置：相对位置；
显示：内联块；
框大小：边框框；
浮动：左；
文本对齐：左对齐；
宽度：自动；
右侧填充：15px；
溢出：隐藏；
}
报头，报头，报头右边{
位置：相对位置；
显示：内联块；
框大小：边框框；
浮动：对；
宽度：自动；
左侧填充：15px；
溢出：隐藏；
清除：左
}
div{
盒影：0 1px；
}
头，桅顶，桅顶中间{
框大小：边框框；
宽度：自动；
溢出：隐藏；
背景：黄色
}

左边
正确的
中间的

我不明白这个伪代码的意义是什么？浮点、内联块或表显示元素不需要它来处理浮点子元素。更少的css也一样，您需要清除什么？我希望包含middle的元素向左移动。当窗口小于某个宽度时，我想使用媒体查询添加after元素。在这一点上，我不想用额外的CSS使问题复杂化，因为我根本无法让它工作。既然顺序是左，右中，左和右浮动，右元素上的after不应该导致中间元素下降吗？@CraigJacobs不应该。

：：after

伪元素为当前选择器（在元素末尾）生成一个伪子元素。这并不意味着选择下一个兄弟姐妹！要实现后者，您可以使用

.maisthead right+*

选择器（假设您不想直接选择

.maisthead middle

。@CraigJacobs好的，我明白了，那么您只需要设置.right到{clear:left}就可以看到它落在下面。left，.middle应该保留在右侧的左侧

header {
    position: relative;
    width: 100%;
    padding-top: 10px;
}
header .header-inner {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 10px;
}
header .masthead {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
header .masthead .masthead-inner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
header .masthead .masthead-left {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    float: left;
    text-align:left;
    width: auto;
    padding-right: 15px;
    overflow: hidden;
}
header .masthead .masthead-right {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    float: right;
    width: auto;
    padding-left: 15px;
    overflow: hidden;
}

header .masthead .masthead-right:after {
    content: "";
    display: table;
    clear: both;
}

header .masthead .masthead-middle {
    box-sizing: border-box;
    width: auto;
    overflow: hidden;
}