使用伪选择器:: after

Question

所以我并排放置2张图片。

我左边一个漂浮，另一个右边，我想用伪选择器清除漂浮物::在

之后

下面的文字只会在图片之间移动。

我总是遇到:: after选择器，它并不总是对我有用。任何指针或建议都将不胜感激。

编辑：忘记在代码

之后添加::

CSS

div#product > img:first-child {
    float: left; 
    margin-left: 55px;
    margin-bottom: 20px;
}
#product img {
    float: right; 
    margin-right: 55px;
    margin-bottom: 20px;
}
img::after {
    clear:both;
}

HTML

<div id="product">
            <img src="#" width="240" >
            <img src="#" width="240" >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>

感谢。

Answer 1

img:after {
    content: ' ';
    display: block;
    clear: both;
}