CSS::伪元素后的clear不工作。

Question

这里有一个小提琴。 http：/jsfiddle.nete4y05yyz1

我正在做一个响应式布局。 我希望:after伪元素能同时清除浮动，并且类.masthead-middle的元素能下降到下一行，但它没有。 如果我在masthead-middle元素上放一个clear: both;就可以了，我也可以这样做，但我不明白为什么浮子没有基于: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;
}

Answer 1

这里是一个答案，用一个片段来说明我的评论。

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>

添加宽度: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>

Answer 2

clear: both 关于 ::after 伪元素是用来清除父元素末尾的浮点数（子元素）的。

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