CSS ::after 伪元素清除不工作

Question

这是一个fiddle：http://jsfiddle.net/e4y05yyz/1/

正在处理响应式布局。我希望 :after 伪元素会清除两个浮点数，并且带有 class .masthead-middle 的元素会掉到下一行，但事实并非如此。如果我明确表示：两者；在有效的刊头中间元素上，我可以做到，但我不明白为什么浮动不基于 :after 清除。 after 伪元素将使用媒体查询添加，但我无法在 "standard" 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;
}

Answer 1

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

如果你想防止元素包裹浮点数，你应该给元素本身 clear: both 声明。

Answer 2

这是一个带有片段的答案来说明我的评论

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>

CSS ::after 伪元素清除不工作

CSS ::after pseudo element clear not working

html

css

css-float

pseudo-element