有人能解释一下为什么在HTML布局中Div隐藏在其他Div后面吗？
我想知道是否有人能向我解释为什么会发生这种情况。对不起，我是CSS/HTML新手。我正在为一个基本页面创建和HTML布局，目前我有三个div。我想要一个容器在左边（id=leftside），宽度为50%，另一个在右边（id=righside），宽度为50%，第三个容器（id=窄）在它们下面，宽度为100% 因此，目前我的第三个div隐藏在前两个div下面，除非我添加属性“top:50%”有人能解释一下为什么会这样吗？我认为，由于空间已经被我的另外两个div占用，所以我不必使用“top”属性来显示第三个div。为什么它被其他部门隐藏了 以下是我的HTML代码：有人能解释一下为什么在HTML布局中Div隐藏在其他Div后面吗？,html,css,Html,Css,我想知道是否有人能向我解释为什么会发生这种情况。对不起，我是CSS/HTML新手。我正在为一个基本页面创建和HTML布局，目前我有三个div。我想要一个容器在左边（id=leftside），宽度为50%，另一个在右边（id=righside），宽度为50%，第三个容器（id=窄）在它们下面，宽度为100% 因此，目前我的第三个div隐藏在前两个div下面，除非我添加属性“top:50%”有人能解释一下为什么会这样吗？我认为，由于空间已经被我的另外两个div占用，所以我不必使用“top”属性来显示
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
无论何时对元素使用浮动，都不要忘记清除它们 为了方便起见，我总是使用
overflow:hidden到父div：
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
.parent{溢出：隐藏；}
现在，您知道隐藏的关键原因了吗？因为前两个div已经设置了浮动，所以它们会从“正常”流中取出，而最后一个div保持不变，不受前两个div的影响
要受影响，您可以将float也设置为最后一个元素，或者清除float
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
有关更多信息，请参阅。我总是创建一个间隔div，并在需要清除任何以前的浮动或编码时使用它。当一个父div中有大量div时，这特别有用
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
.spacer{
明确：两者皆有；
边界：无；
宽度：100%；
}
*以上其他组别*
*以下为其他分区*
谢谢大家的回复，现在对我来说很有意义！当您要清除的元素位于同一父元素内时，在父元素上使用溢出将无效。抱歉，我无法获取您的信息。请重新措辞好吗？带有id=“窄”的元素仍将位于浮动元素的后面，因为它位于具有溢出：隐藏的元素的内部。
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*