CSS元素並不包裹正確

我有這兩個CSS類和它們不會出現他們的容器內：CSS元素並不包裹正確

.container{ 
    height: auto; 
    border: 1px solid red; 
} 
.container::after{ 
    content:""; 
    clear: both; 
    display: block; 
}  
.gauche{ 
     float: left; 
     background-color: yellow; 
     height: 25px; 
     width: 50%; 
} 
.droite{ 
     float:left; 
     width: 50%; 
     height: 25px; 
     background-color: blue; 
} 

<div class = 'container'> 
    <div class = 'gauche'></div> 
    <div class = 'droite'></div> 
</div>

如果他們出現，紅色邊框包裹要他們，這件事是不是這樣的。有關如何解決這個問題的任何建議？

jsBin

來源

2016-11-07 J. Doe

謝謝你的回滾@MichaelSchmidt –

沒有問題。我編輯了這個問題，爲你的問題做了一個小片段。所以這些問題不應該包含下面的答案。所以我刪除了片段中的「overflow：hidden」。這是你的答案之前的片段嗎？ –

@MichaelSchmidt是的，這個片段是我的答案張貼（回答者只添加一個屬性，所以這就是爲什麼我的問題和他的答案看起來相似，但不一樣）。我接受了第一個用戶的編輯後，我猜想我的問題還不清楚，但不知道如何恢復我的帖子，所以再次感謝您。 –

您需要使用overflow: hidden父清除浮動。

.container{ 
 
    overflow: hidden;  /* Add this here. */ 
 
    height: auto; 
 
    border: 1px solid red; 
 
} 
 
container::after{ 
 
    content:""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
.gauche{ 
 
    float: left; 
 
    background-color: yellow; 
 
    height: 25px; 
 
    width: 50%; 
 
} 
 
.droite{ 
 
    float:left; 
 
    width: 50%; 
 
    height: 25px; 
 
    background-color: blue; 
 
}

<div class = 'container'> 
 
    <div class = 'gauche'></div> 
 
    <div class = 'droite'></div> 
 
</div>

預覽

來源

2016-11-07 09:54:08

CSS元素並不包裹正確

回答

相關問題