CSS clear float with :after 元素不起作用

【问题标题】：CSS clear float with :after element not workingCSS clear float with :after 元素不起作用
【发布时间】：2015-06-04 06:03:01
【问题描述】：

我似乎无法做到这一点。很简单，清除h4元素（widget-title）后面的float，让文本框左对齐换行。

HTML 不能更改。

这里是小提琴：http://jsfiddle.net/j29ubvjw/

.widget-wrap {
    padding:15px;
    background-color: #EEE;
}

.widget-title {
    font-size: 18px;
    margin:-15px 0 15px -15px;
    background-color: #CCC;
    padding: 15px;
    float:left;
}

.widget-title:after {
    content: "";
    display: block;
    clear: both;
}


<div class="widget-wrap">
    <h4 class="widget-title">My Title</h4>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper</p>
    </div>
</div>

我做错了什么？

【问题讨论】：

标签： css css-float clearfix

【解决方案1】：

请注意，::after 伪元素不会在元素本身之后创建内容，而是将伪子元素附加到元素中。

换句话说，通过使用.widget-title::after，在匹配.widget-title选择器的元素的内容之后附加一个伪元素。

<h4 class="widget-title">
    ::before <!--appended pseudo-element -->
    My Title
    ::after  <!--appended pseudo-element -->
</h4>

为了清除标题后的浮动，您可以选择下一个相邻的兄弟元素并为其设置clear: both;声明：

Example Here

.widget-title + * { clear: both; }

或者在这种情况下：

.widget-title + div { clear: both; }

【讨论】：

很高兴见到你@Hashem，:)
感谢@HashemQolami！向您发送请求。