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元素并不包裹正确

回答

相关问题