直接CSS布局

我肯定以前有人问过这个问题，但我真的很想知道为什么这是在做它正在做的事情，而不仅仅是答案（如果有答案的话）

我现在得到的是一个非常简单的布局，它包括一个主包装器div，一个头div，一个内容div和一个页脚div。我遇到的问题是，当我在内容div中放置一些正方形并将它们的位置设置为绝对时，以便将它们放置在一个网格中，以便它们跨越内容div的整个宽度。当我将这些div设置为绝对时，页脚div会跳起来，并且不会显示在内容div的网格下面位于其父内容div中的div。如果我将内容div的高度设置为footer div应位于的位置，但如果我不设置或将其设置为auto（如我所愿），则footer div有效地位于内容div的下方

我已经读到，将任何内容设置为绝对都会使其脱离文档的正常流程，但是我是否可以设置内容div，以便内容div的高度由内容（即div的网格）设置，并且页脚div始终位于内容div的下方

这是一个模型

这是我的密码

#wrapper {
width: 400px;
height: auto;
border: 1px solid #000; 
margin: 10px auto;   
padding: 10px;    
}

#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}

#content {
position: relative;
width: 100%;
/*height:92px;*/

border: 1px solid #000; 
margin: 10px 0px 0px 0px;        
}

.box {
position: absolute;
width: 92px;
height: 92px; 
background-color: #999;    
}

#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000; 
margin: 10px 0px 0px 0px; 
}


<div id="wrapper">

<div id="header">header</div>

<div id="content">

    <div class="box" style="top:0px; left:0px;"></div>
    <div class="box" style="top:0px; left:102px;"></div>
    <div class="box" style="top:0px; left:205px;"></div>
    <div class="box" style="top:0px; left:308px;"></div>

</div>

<div id="footer">footer</div>

</div>​

#包装器{
宽度：400px；
高度：自动；
边框：1px实心#000；
利润率：10px自动；
填充：10px；
}
#标题{
宽度：100%；
高度：50px；
边框：1px实心#000；
}
#内容{
位置：相对位置；
宽度：100%；
/*高度：92px*/
边框：1px实心#000；
保证金：10px 0px 0px 0px；
}
.盒子{
位置：绝对位置；
宽度：92px；
高度：92px；
背景色：#999；
}
#页脚{
位置：相对位置；
宽度：100%；
高度：92px；
边框：1px实心#000；
保证金：10px 0px 0px 0px；
}
标题
页脚
​

内部元素不需要使用

位置：绝对

，要水平放置它们，只需使用

浮动：左

，并留有间距。对于内容区域，您仍然会得到类似的折叠高度，因为浮动部分也会从内容流中取出。但是，通过对内容区域应用

溢出：隐藏
可以很容易地解决这一问题

我已将第一个和最后一个类添加到您的
框中
元素，只是为了更轻松地处理页边距：

<div id="content">
  <div class="box first"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box last"></div>
</div>



我还更改了您的css项，如下所示：

#content {
  overflow: hidden; /* <-- added overflow hidden */
  position: relative;
  width: 100%;
  outline: 1px solid #000;
  margin: 10px 0px 0px 0px;        
}

.box {
  float: left; /* <-- replaced pos abs with float left */
  margin-right: 10.5px; /* <-- added a specific margin */
  width: 92px;
  height: 92px;
  background-color: #999;    
}

.box.last {
  margin-right: 0px;
}

#内容{
溢出：隐藏；/*您对内部div使用绝对定位是有原因的吗？非常感谢您的回复，也感谢您在评论中如此详细。我使用绝对定位来定位.box div，以便在包装div的整个宽度上获得to跨度，但您似乎已经使用边距wh对其进行了排序ich好多了。一点也不担心，浮动通常比绝对位置更能帮助你摆脱困境——不过有时它们本身也会让你感到痛苦；）如果你对比使用浮动更好的东西感兴趣的话（它还不太受支持；但请阅读FlexBox.。真的迫不及待地想知道它是否可靠——它会让生活变得更加轻松。