CSS clear float with：元素不工作后

Question

我似乎无法做到这一点。 这很简单，清除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>

我做错了什么？

Answer 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; }