アスペクト比div他のアスペクト比のdivがインテントとして機能しない

Question

私のコードに間違いがありますか？アスペクト比をpadding-bottomにするのではなく、内側のdiv（2つ）が外側のdivを埋めるのはなぜですか？

.one { 
 
    position: relative; 
 
    background: #990000; 
 
    background-size: contain; 
 
} 
 

 
.one:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 40%; 
 
} 
 

 
.one:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.two { 
 
    position: relative; 
 
    top: 0; 
 
    background: #009900; 
 
} 
 

 
.two:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 20%; 
 
} 
 

 
.two:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="one"> 
 
    <div class="two"></div> 
 
</div>

https://jsfiddle.net/mhk99j8z/

Answer 1

あなたone:beforeフロートをクリアしていないので、それはだ - :after（他のすべての要素の後に）要素

の最後に追加 - 2は、後に one:afterが来ます

.one { 
 
    position: relative; 
 
    background: #990000; 
 
    background-size: contain; 
 
} 
 

 
.one:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 40%; 
 
} 
 
    
 
.two { 
 
    clear:left;    /* remove one:after and clear on two */ 
 
    position: relative; 
 
    top: 0; 
 
    background: #009900; 
 
} 
 

 
.two:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 20%; 
 
} 
 

 
.two:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="one"> 
 
    <div class="two"></div> 
 
</div>