HTML – 为什么一个重叠另一个?

这是我的页面HTML
<body>
  <header></header>
  <div class="conteudo_representantes"></div>
  <div class="rodape"></div>
</body>

我有.conteudo_representantes div里面的内容正在越过.rodape(页脚)div.

这是我的页面的CSS:

.conteudo_representantes {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    min-height:586px;
    margin-top:40px;
    position: relative;
}


.rodape {
    position: relative;
    width:960px;
    height:50px;
    margin:36px auto;
    background:transparent url(../img/header_pattern.png) repeat top left;
}

整个页面源可以在这个example中找到.(单击列表的第二行,其中显示:02 – SãoPaulo – Capital,以查看此问题的实际效果.)

我究竟做错了什么?

解决方法

问题是你的div conteudo_representantes没有正确地包装它的所有内容,所以就它而言,页脚处于正确的相对位置并且代表div由于某种原因溢出

编辑:

实际上,这与您管理浮动属性的方式有关.

你的div代表浮动向左,但页脚没有.你可以通过从代表div中关闭float:left来测试这个.

这是div重叠的常见原因.

在布置HTML页面时,请考虑每个div元素如何堆叠到下一个. float元素最终将决定div的堆栈方式

快速正确地堆叠元素guide

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...