Css 奇怪的容器div行为

我问这个是为了学习；这种行为没有任何负面影响，但我只是想知道这是否会在未来产生负面后果

因此我有一个容器div:

content\u wrap

，它还有另外两个div:

side\u bar

和

main\u content

。容器div的宽度为

980px

，用于使用

marginleft

和

marginright

将其内容居中

但是，当我调试页面（在Firefox中）时，我注意到浏览器将div呈现为

0x0px

，并将父div呈现在屏幕外。但是，它确实正确地定位了子div。有关示例，请参见此JSFIDLE：

我在谷歌上搜索了这个问题，大多数答案都与

浮动有关，可以通过
清除来解决：两者都是
，但我不使用任何浮动。我注意到如果我将
main\u内容
div从
位置更改为：绝对至<代码>位置：相对，则正确显示
内容_wrap
。或者我可以通过设置
内容的
高度来修复它

我实际上不需要能够看到内容的包装，所以没有什么问题，因为它是通过将子div居中来完成它的工作的。我只是想知道这样离开会不会是一个坏习惯？这是一件坏事，还是很重要？
位置：fixed
和
位置：absolute
将元素从流中移除，因此在所有子div上使用这两个位置之一将完全折叠父div

如果在折叠的div下面有内容，它会像一样向上和在该内容上/下流动

您不需要绝对定位main_content div，但需要更改一些内容，使边栏和main_内容顶部对齐


由于侧边栏是固定的，所以它使用文档而不是容器div作为
top
的参考，而
main\u content
将使用主体（除非向容器添加
位置：relative
）。去掉主体的默认填充/边距将修复较小的对齐差异

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

position:fixed
和
position:absolute
将元素从流中取出，因此在所有子div上使用这些位置之一将完全折叠父div

如果在折叠的div下面有内容，它会像一样向上和在该内容上/下流动

您不需要绝对定位main_content div，但需要更改一些内容，使边栏和main_内容顶部对齐


由于侧边栏是固定的，所以它使用文档而不是容器div作为
top
的参考，而
main\u content
将使用主体（除非向容器添加
位置：relative
）。去掉主体的默认填充/边距将修复较小的对齐差异

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

position:fixed
和
position:absolute
将元素从流中取出，因此在所有子div上使用这些位置之一将完全折叠父div

如果在折叠的div下面有内容，它会像一样向上和在该内容上/下流动

您不需要绝对定位main_content div，但需要更改一些内容，使边栏和main_内容顶部对齐


由于侧边栏是固定的，所以它使用文档而不是容器div作为
top
的参考，而
main\u content
将使用主体（除非向容器添加
位置：relative
）。去掉主体的默认填充/边距将修复较小的对齐差异

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

position:fixed
和
position:absolute
将元素从流中取出，因此在所有子div上使用这些位置之一将完全折叠父div

如果在折叠的div下面有内容，它会像一样向上和在该内容上/下流动

您不需要绝对定位main_content div，但需要更改一些内容，使边栏和main_内容顶部对齐


由于侧边栏是固定的，所以它使用文档而不是容器div作为
top
的参考，而
main\u content
将使用主体（除非向容器添加
位置：relative
）。去掉主体的默认填充/边距将修复较小的对齐差异

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

尝试将其他元素添加到此HTML中，享受恐怖：D


实际上，在你的代码中有很多我不会做的事情。首先，当一个元素具有
position:absolute
或
position:fixed
时，它的布局被其他元素“忽略”，或者换句话说，它不能“推”任何元素，这就是容器高度为0的原因。就好像它们是空灵的（我知道这是有史以来最好的解释）。


您应该查看这篇关于定位的文章--

它们位于您期望的位置的事实是，HTML中实际上没有其他元素，
绝对
元素相对于
主体
定位，
固定
元素也是如此（但具有
位置：固定
的元素总是这样做）。查看向父div添加其他内容时发生的情况--



长话短说——如果没有绝对元素或固定元素，你就不应该用它们来构建布局。
尝试将其他元素添加到这个HTML中，享受这个恐怖：D


实际上，在你的代码中有很多我不会做的事情。首先，当元素具有
位置时：绝对
或
位置