为什么我的图像在使用clear后仍然浮动：两者？

Question

具有类call-img的图像应该不会浮动，因为我使用了clear:both。但它仍然存在。

HTML：

<header>
    <img class="logo-img" src="images/logo.png">
    <div class="topnav-link">
        <span>Menu&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img class="menu-img" src="images/menu.png">
    </div>
    <img class="call-img" src="images/call.png">
</header>

CSS：

header {
    padding-top: 2.5em;
}
.logo-img {
    float: left;
    width: 130px;
}
.menu-img {
    width: 20px;
}
.topnav-link {
    float: right;
    color: white;
    font-size: .8em;
}
.menu-img,
.topnav-link span {
    vertical-align: middle;
}
.call-img {
    display: inline-block;
    clear: both;
    align: center;
}

Answer 1

将css更改为

.call-img {
    display: block;
    clear: both;
    text-align: center;
}

Answer 2

您想要的“清除”必须在之后之后，无论您想要“取消浮动”哪个元素（返回DOM的默认流程）。在这种情况下，我将为<header>元素提供一个clear：both的css属性。

另一种选择是在元素之后精确清除。

.call-img::after{
content: "";
clear: both;
}