低於一定寬度時，浮動div與浮動div重疊

Question

我遇到了一個我正在處理的項目的問題，我面臨的問題是，右上浮動的div會與下面的所有元素重疊（似乎將div視為沒有內容）問題是我在Adobe Edge動畫中制作的動畫徽標。

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

網站將正常工作，直到您將寬度降低到500px以下。 之后，將更改3個標題div，以使“ lefthead”和“ snippet”的寬度為50％，而“ righthead”位於下方的中央。

我試過使用'clear：both'，但這似乎不起作用（我可能使用錯了，但我不認為我是）

任何幫助表示贊賞。 謝謝

Answer 1

更新

@Matt Smith有一個我忽略的解決方案，比這個簡單得多，糟糕。

---

總體而言，您擁有的標記和樣式超出了所需，這使您的工作變得有些麻煩。 就是說，問題的核心在於header和.bottomhead所有height聲明。 通過限制高度，堆疊元素的內容無法拉伸父元素的高度。

@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使元素左右浮動也很有用。

Answer 2

如果只想使<div class="righthead">降到其他div以下而不重疊<nav> ，請將此媒體查詢規則集的float屬性從none更改為left ：

之前：

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

后：

@media (max-width: 500px) {
  .righthead {
    float: left !important;
  }
}

Answer 3

您需要在媒體查詢中的標頭中刪除所有特定height 。 將其設置為height:auto; 代替