CSS 使用 :after 元素清除浮动无效

Question

我好像没听清楚。很简单，清除h4元素（widget-title）后面的浮动，让文本框左对齐换行。

无法更改HTML。

.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 pseudo-element 不会在之后元素本身创建内容，而是将 pseudo-child-element 附加到元素中。

换句话说，通过使用.widget-title::after，在匹配.widget-title select或.

的元素内容后追加一个pseudo-element

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

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

Example Here

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

或者在这种情况下：

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

CSS 使用 :after 元素清除浮动无效

CSS clear float with :after element not working

css

css-float

clearfix