Question

在这个片段中，您可以找到带有装饰下划线的h2标题，该标题是使用：after伪元素实现的。一切都运行良好，直到我们有一个漂浮的图像，它应该出现在前面提到的h2的左边：h2将正确浮动，但假元素不会，这会打破所需的效果。（小橙线应低于h2的最后一行。）

有什么方法吗？

div.post-img-wrap img.thumbnail {
  float: left;
  max-width: 200px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-top: 25px;
}
article h2:after {
  content: "";
  display: block;
  z-index: 1;
  margin: 0;
  width: 10%;
  height: 2px;
  margin-top: 10px;
  left: 0;
  background: #E96656 none repeat scroll 0% 0%;
}

<body>
  <article>
    <header>
      <div class="post-img-wrap">
        <a href="#">
          <img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
        </a>

      </div>
      <h2><a href="#">This is a very long title with a lot of text in here, so long, so long, so veeeery long</a></h2>

    </header>
    <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
        lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
        sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
    </div>
  </article>
</body>

Answer 1

问题是浮动元素是out-of-flow：

如果一个元素被浮动，那么它就被称为 out of flow 定位，或是根元素。

因此，它们不会影响周围的元素，因为in-flow元素会。

9.5 Floats中解释了这一点：

由于浮动不在流中，因此创建了未定位的块框在浮动箱垂直流动之前和之后，好像浮子没有存在。但是，旁边创建的当前和后续行框必要时缩短浮子以为边缘盒腾出空间浮动。

然而，建立Block Formatting Context（是BFC根）的块元素是例外，如9.5 Floats中所述：

表的边框，块级替换元素或正常流程中的元素，用于建立新的块格式上下文[...]不得与任何浮点数的边距框重叠阻止格式化上下文作为元素本身。

建立BFC的常用方法是将overflow设置为visible以外的任何内容，例如

article h2:after {
  overflow: hidden;
}

＆＃13;

div.post-img-wrap img.thumbnail {
  float: left;
  max-width: 200px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-top: 25px;
}
article h2:after {
  content: "";
  display: block;
  z-index: 1;
  margin: 0;
  width: 10%;
  height: 2px;
  margin-top: 10px;
  left: 0;
  background: #E96656 none repeat scroll 0% 0%;
  overflow: hidden;
}

＆＃13;

<article>
  <header>
    <div class="post-img-wrap">
      <a href="#">
        <img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
      </a>

    </div>
    <h2><a href="#">This is a very long title with a lot of text in here, so long, so long, so veeeery long</a></h2>
  </header>
  <div class="entry-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
      lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
      sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
  </div>
</article>

＆＃13;

Answer 2

您可以使用此代码。我将伪元素（：after）添加到锚点（不是h2）。我还在position: relative标记中添加了a，在伪元素中添加了position: absolute。

div.post-img-wrap img.thumbnail {
  float: left;
  max-width: 200px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-top: 25px;
}
article h2 > a {
  position: relative;
}
article h2 > a:after {
  position: absolute;
  content: "";
  z-index: 1;
  width: 10%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background: #E96655;
}

<body>
  <article>
    <header>
      <div class="post-img-wrap">
        <a href="#">
          <img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
        </a>

      </div>
      <h2><a href="#">This is a very long title with a lot of text in here, so long, so long, so veeeery long</a></h2>

    </header>
    <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
        lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
        sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
    </div>
  </article>
</body>

强制：伪后尊重浮动元素

2 个答案: