Question

这是一个小提琴：http://jsfiddle.net/e4y05yyz/1/

处理自适应布局。我希望：after伪元素将清除两个浮点数并且具有类.masthead-middle的元素将下降到下一行，但它不会。如果我说清楚：两者;在桅顶 - 中间元素工作，我可以做到这一点，但我不明白为什么浮动没有清除基于：之后。 after伪元素将使用媒体查询添加，但我无法在＆＃34;标准＆＃34;的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

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

添加宽度：100％以正确看到所有宽度都可用

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

在clear: both伪元素上的

::after用于清除父元素末尾的（子代）浮点数。

如果要阻止元素包装浮点数，则应该向元素本身提供clear: both声明。

CSS :: after伪元素后无法正常工作

2 个答案: