javascript - 低于一定宽度时 float 的 div 与未 float 的 div 重叠

Question

我正在处理的元素遇到了问题，我面临的问题是向右浮动的 div 会覆盖下面的所有元素(它似乎将 div 视为没有内容)有问题的 div 是我在 adobe edge animate 中制作的动画 Logo 。

HTML——

<header>

    <div class="tophead">   </div>

    <div class="bottomhead">

        <div class="lefthead col-sm-3">
            <img src="includes/lefthead.svg"></img>
        </div>
        <div class="snippet">
            <h2>All Sections</h2>
        </div>

        <div class="righthead col-sm-3">
            <div id="Stage" class="EDGE-31003756">
            </div>

            <!--<img src="includes/righthead.svg"></img>-->
        </div>

    </div>
    <div class="clear"></div>
</header>

CSS -

.lefthead {
padding-top:7px;
float:left !important;
}
.lefthead img {
max-height:77px;
min-height:60px;
}
.righthead {
padding-top:4px;
float:right !important;
}


.righthead.col-sm-3 {
max-height:70px;
min-height:60px;
}

.clear {
clear:both;
}

这只是 CSS 的一部分，因为要粘贴的内容太多了。

可以在此处找到该网站的实时版本 - http://www.mosesmartin.co.uk/digitalguys/home.php

在您将宽度降低到 500 像素以下之前，该网站将正常运行。之后，3 个标题 div 将发生变化，以便“lefthead”和“snippet”的宽度为 50%，而“righthead”位于下方中央。

我尝试过使用“clear:both”，但这似乎行不通(我可能用错了，但我不认为我错了)

感谢任何帮助。谢谢

Answer 1

更新

@Matt Smith 有一个我忽略的解决方案，但比这简单得多，我的错。

---

总的来说，您拥有的标记和样式比需要的多，这给您带来了一些问题。也就是说，问题的核心在于您对header 和.bottomhead 的所有height 声明。通过限制高度，堆叠元素的内容无法拉伸(stretch)父元素的高度。

@media (max-width: 500px) {
    header {
        height: 80px;
    }
}
@media (max-width: 767px) {
    header {
        height: 100px
    }
}
header {
    width: 100%;
    height: 100px;
}    
@media (max-width: 767px) {
    .bottomhead {
        height: 80px;
    }
}
.bottomhead {
    height: 80px;
}

删除或注释掉上面提到的所有 height 声明。那应该让你得到你正在寻找的东西或至少接近。您还可以删除 .break 和 .clear DIV。

您可能需要在字词后的各处进行调整。

您可以在许多地方简化事情，删除不需要的标记，即向 .bottomhead 添加边框并删除 .tophead。

.bottomhead {
    border-top: 30px solid #20b148;
}

您可能还会发现使用 Bootstrap 中的实用程序类很有用，例如 .pull-left 和 .pull-right 分别向左和向右浮动元素。