Force :after 伪尊重浮动元素
Force :after pseudo to respect floated element
在此代码段中，您可以找到带有装饰下划线的 h2 header，它是使用 :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>
您可以使用此代码。我将伪元素 (: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>
问题是浮动元素是out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
因此，它们不会像 in-flow 元素那样影响周围的元素。
这在9.5 Floats中有解释：
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
但是，建立 块格式化上下文 （是 BFC 根）的块元素是例外，如 9.5 Floats:
中所述
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context […] must not overlap the margin box of any floats in the same
block formatting context as the element itself.
建立 BFC 的常用方法是将 overflow 设置为 visible 以外的任何值，例如
article h2:after {
overflow: hidden;
}
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;
}
<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>
在此代码段中，您可以找到带有装饰下划线的 h2 header，它是使用 :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>
您可以使用此代码。我将伪元素 (: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>
问题是浮动元素是out-of-flow:
An element is called out of flow if it is floated, absolutely positioned, or is the root element.
因此，它们不会像 in-flow 元素那样影响周围的元素。
这在9.5 Floats中有解释：
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
但是，建立 块格式化上下文 （是 BFC 根）的块元素是例外，如 9.5 Floats:
中所述The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context […] must not overlap the margin box of any floats in the same block formatting context as the element itself.
建立 BFC 的常用方法是将 overflow 设置为 visible 以外的任何值，例如
article h2:after {
overflow: hidden;
}
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;
}
<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>