html - clearfix 不适用于绝对位置

Question

我有一个包含绝对位置和左右浮动的 div。现在我想在第一个 div 下方放置一张图片。

现在的问题是图像重叠在第一个 div 下方。我希望图像显示在第一个 div 下方而不重叠。

https://jsfiddle.net/jv7afgn1/

<div class="top">
    <div class="left" align="center">
        <p><a href="#">Sell</a></p>
        <p><a href="#">Download App</a></p>
        <p><a href="#">24x7 Customer Care</a></p>
    </div>
    <div class="right" align="center">
        <p><a href="#">Track Order</a></p>
        <p><a href="#">Help</a></p>
        <p><a href="#">About</a></p>
        <p><a href="#">Contact</a></p>
    </div>
</div>

<div class="clearfix"></div>

<div class="logo_menu">
    <p><img src="assets/images/logo.png" alt="" title="" /></p>
</div>

.clearfix {
    clear:both;
}
/* Top */
.top {
    width:100%;
    height:auto;
    background:#E9E9E9;
    position:absolute;
    padding:10px;
}
.top .left {
    float:left;
}
.top .left p {
    display:inline-block;
    margin:0 10px 0 10px;
    font-size:12px;
}
.top .left p a {
    text-decoration:none;
    color:#B5B5B5;
}
.top .left p a:hover {
    text-decoration:underline;
    color:#FD6123;
}
.top .right {
    float:right;
}
.top .right p {
    display:inline-block;
    margin:0 10px 0 10px;
    font-size:12px;
}
.top .right p a {
    text-decoration:none;
    color:#B5B5B5;
}
.top .right p a:hover {
    text-decoration:underline;
    color:#FD6123;
}

/* Menu and Logo */
.logo_menu {
    width:100%;
    height:auto;
}

Answer 1

你甚至必须对 Logo 进行绝对定位吗？

An absolute positioned element is on "it's own layer" of the homepage, so trying to clear floats wont work.

我的 clearfix 通常是这样的:

.clearfix:after {
  clear:both;
  display:block;
  content: "";
}

fiddle :https://jsfiddle.net/jv7afgn1/4/