CSS ::after伪元素清除不起作用答案

【问题标题】：CSS ::after pseudo element clear not workingCSS ::after伪元素清除不起作用
【发布时间】：2015-02-24 22:34:21
【问题描述】：

使用响应式布局。我希望 :after 伪元素会清除浮点数，并且具有类 .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>

CSS：

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;
}

【问题讨论】：

我不明白这里那个伪的意义？浮动、内联块或表格显示元素不需要它来处理浮动子元素。
jsfiddle.net/e4y05yyz/2less css 也是这样，你需要清除什么？
我希望包含 middle 的元素向左移动。当窗口低于某个宽度时，我想使用媒体查询添加 after 元素。在这一点上，我不想用额外的 CSS 使问题复杂化，因为我根本无法让它工作。既然顺序是左中右，左右浮动，那么右边元素上的after不应该导致中间元素下落吗？
@CraigJacobs 不，不应该。 ::after 伪元素为当前选择器（在元素的末尾）生成一个伪子元素。这并不意味着选择下一个兄弟姐妹！要实现后者，您可以使用.masthead-right + * 选择器（假设您不想直接选择.masthead-middle）。
@CraigJacobs 好吧，我明白了，那么您只需将 .right 设置为 { clear:left} 即可看到它位于 .left 下方，.middle 应保持在右侧的左侧

标签： html css css-float pseudo-element

【解决方案1】：

这是一个带有 sn-p 的答案来说明我的评论

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;
  clear:left
}


div {
  box-shadow:0 0 0 1px;
  }
header .masthead .masthead-middle {
    box-sizing: border-box;
    width: auto;
    overflow: hidden;
  background:yellow
}

<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>

添加 width:100% 以查看所有可用宽度

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: 100%;
    padding-left: 15px;
    overflow: hidden;
  clear:left
}


div {
  box-shadow:0 0 0 1px;
  }
header .masthead .masthead-middle {
    box-sizing: border-box;
    width: auto;
    overflow: hidden;
  background:yellow
}

<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>

【讨论】：

【解决方案2】：

::after 上的clear: both 伪元素用于清除父元素末尾的浮动（子元素）。

如果你想阻止一个元素包裹浮动，你应该给元素本身声明clear: both。

【讨论】：