爲什麼兩個div彼此重疊而沒有定位？

Question

我有兩個div。但下面的那個覆蓋了上面的那個。怎麼樣？ 這是關於div「hoogte」。它在「diveltelling」div旁邊，但div「hoogte」必須在div下面「doeltelling」。 https://jsfiddle.net/5g0ur45u/

#bovenrij { 
width: 80%; 
float: right; 
margin-right: 3em; 



    } 

#bovenrij div{ 
width: 20%; 
float: left; 


} 



#interactief{ 
width: 28%; 
background-color: #e8b215; 
float: left; 
padding-top: 1em; 
padding-bottom: 1em; 
padding-left:2% ; 
padding-right: 2%; 
margin-left: 2%; 
} 

/*licht roze achtergrond kleur*/ 
#platform, #ad, #platformad, #customised, #personal{ 
background-color: #f4f4f4; 
float: left; 
width: 28%; 
margin-left: 2%; 
margin-bottom: 1em; 
padding-top: 1em; 
padding-bottom: 1em; 
padding-left: 2%; 
padding-right: 2%; 
} 

#interactief > h1{ 
color: white; 
font-size: 18px; 
margin-bottom: 0.4em; 
} 
/*titel*/ 
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{ 
color: #e8b215; 
font-size: 18px; 
margin-bottom: 0.4em; 
} 
/*sub titel*/ 
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised > h2, #personal > h2{ 
color: black; 
margin-bottom: 1em; 

} 

/*uitleg tekst*/ 
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p, #personal > p{ 
line-height: 120%; 
margin-bottom: 1em; 
} 
/*lees meer*/ 
#interactief > h3 { 
margin-left: 0em; 
background-color: #3c434a; 
padding: 0.5em; 
width: 4.75em; 
border-radius: 0.3em; 
} 
/*lees meer*/ 
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{ 
background-color: #3c434a; 
width: 4.75em; 
padding: 0.5em; 
border-radius: 0.3em; 
} 

@media screen and (max-width: 1088px) { 
#bovenrij div{ 
    width: 43%; 
    float: left; 
} 


} 

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 

Answer 1

<div id="hoogte" style="clear:both"> 
    <h1>Blijf op de hoogte</h1> 
</div> 

你必須用明確的：這兩個屬性，以避免overlapping.please參考你的小提琴。

https://jsfiddle.net/kq7w8f80/

Answer 2

刪除類clearfix - #bovenrij

添加類clearfix - #doelstelling

.clearfix { 
 
    *zoom: 1; 
 
} 
 

 
.clearfix:before, 
 
.clearfix:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
} 
 

 
#bovenrij { 
 
    width: 80%; 
 
    float: right; 
 
    margin-right: 3em; 
 
    position: relative; 
 
    
 

 
} 
 

 
#bovenrij div{ 
 
    width: 20%; 
 
    float: left; 
 

 

 
} 
 

 

 

 
#interactief{ 
 
    width: 28%; 
 
    background-color: #e8b215; 
 
    float: left; 
 
    padding-top: 1em; 
 
    padding-bottom: 1em; 
 
    padding-left:2% ; 
 
    padding-right: 2%; 
 
    margin-left: 2%; 
 
} 
 

 
/*licht roze achtergrond kleur*/ 
 
#platform, #ad, #platformad, #customised, #personal{ 
 
    background-color: #f4f4f4; 
 
    float: left; 
 
    width: 28%; 
 
    margin-left: 2%; 
 
    margin-bottom: 1em; 
 
    padding-top: 1em; 
 
    padding-bottom: 1em; 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
} 
 

 
#interactief > h1{ 
 
    color: white; 
 
    font-size: 18px; 
 
    margin-bottom: 0.4em; 
 
} 
 
/*titel*/ 
 
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{ 
 
    color: #e8b215; 
 
    font-size: 18px; 
 
    margin-bottom: 0.4em; 
 
} 
 
/*sub titel*/ 
 
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised > h2, #personal > h2{ 
 
    color: black; 
 
    margin-bottom: 1em; 
 

 
} 
 

 
/*uitleg tekst*/ 
 
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p, #personal > p{ 
 
    line-height: 120%; 
 
    margin-bottom: 1em; 
 
} 
 
/*lees meer*/ 
 
#interactief > h3 { 
 
    margin-left: 0em; 
 
    background-color: #3c434a; 
 
    padding: 0.5em; 
 
    width: 4.75em; 
 
    border-radius: 0.3em; 
 
} 
 
/*lees meer*/ 
 
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{ 
 
    background-color: #3c434a; 
 
    width: 4.75em; 
 
    padding: 0.5em; 
 
    border-radius: 0.3em; 
 
} 
 

 
@media screen and (max-width: 1088px) { 
 
    #bovenrij div{ 
 
     width: 43%; 
 
     float: left; 
 
    } 
 

 

 
} 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
}

<div id="doelstelling" class="clearfix"> 
 
<h1>De Oplossing voor elke doelstelling</h1> 
 
<h2>Onze online producten en Lorem Ipsum</h2> 
 
    <p>Present commodo cursus nagnva vel scelerisque nisl consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p> 
 

 

 

 
<div id="bovenrij" > 
 
\t \t <div id="interactief"> 
 
\t \t \t <h1>Interactieve video's</h1> 
 
\t \t \t <h2>Zijn met Lorem Ipsum</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl<br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="platform"> 
 
\t \t \t <h1>Ons Online Video Platform</h1> 
 
\t \t \t <h2>Is altijd Ipsum Color</h2> 
 
      <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="ad"> 
 
\t \t \t <h1>Video Advertentie Platforms</h1> 
 
\t \t \t <h2>Zijn zeer lorem ipsum dolor</h2> 
 
      <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 

 
<div id="platformad"> 
 
\t \t \t <h1>Video advertentie Platforms</h1> 
 
\t \t \t <h2>Zijn zeer Lorem Ipsum dolor</h2> 
 
    <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="customised"> 
 
\t \t \t <h1>De customised Player</h1> 
 
\t \t \t <h2>Bieden wij Lorem Ipsum Dolor</h2> 
 
      <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="personal"> 
 
\t \t \t <h1>Gepersonaliseerde Video's</h1> 
 
\t \t \t <h2>Kunnen de Lorem Ipsum dolor</h2> 
 
      <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div id="hoogte"> 
 
\t <h1>Blijf op de hoogte</h1> 
 
</div>

Answer 3

儘量把<div style="clear:both;"></div>前個DIV，像這樣

<div style="clear:both;"></div> 

    <div id="hoogte"> 
    <h1>Blijf op de hoogte</h1> 
    </div> 

或

<div id="hoogte" style="clear:both;"> 
    <h1>Blijf op de hoogte</h1> 
    </div>