网页Footer呈现为inline元素而非block元素的技术求助

嘿，我一眼就看出你遇到的问题了——这是使用float布局时非常常见的小坑，别慌，几步就能搞定！

问题原因 #

你给.main_content和.timeline都设置了float: left，这会让这两个元素脱离正常的文档流。简单说就是，页面的布局引擎会把它们当作“飘”在页面上的元素，后面的footer元素会默认占据它们原本在文档流里的位置，所以就跑到侧边去了，哪怕你给footer加了display: block也没用，因为问题根源是浮动的影响。

另外还要提一下，你的HTML结构有个小错误：<header>标签应该放在<body>标签内部，现在你把它放在了<head>外面，这不符合HTML规范，也可能间接影响布局，记得调整过来哦！

快速解决方案 #

这里给你几个简单有效的修复方法，选一个你觉得顺手的就行：

方法1：给Footer添加清除浮动属性 #

这是最直接的办法，修改footer的CSS，加上clear: both，强制它清除左右两边的浮动影响，乖乖回到页面底部：

footer {
  display: block;
  clear: both; /* 新增这行 */
}

方法2：使用Clearfix技巧包裹浮动元素 #

这种方法更灵活，适合以后添加更多浮动元素的场景：
首先在样式里定义clearfix类：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给包含浮动元素的父容器（也就是你的<body>标签）加上这个类：

<body class="clearfix">

方法3：给父容器添加Overflow属性 #

给body标签添加overflow: auto，让它自动包裹住所有浮动的子元素：

body{
  width: 1080px;
  font-family: Arial, Verdana, sans-serif;
  color: #665544;
  overflow: auto; /* 新增这行 */
}

额外的小建议 #

• 把<!DOCTYPE HTML>改成标准的<!DOCTYPE html>（注意开头的感叹号，小写html是现代规范）
• 调整HTML结构，把<header>移动到<body>内部，正确的结构应该是：

<html>
  <head>
    <!-- 头部内容 -->
  </head>
  <body>
    <header>
      <!-- 导航和logo -->
    </header>
    <!-- 其他内容 -->
    <footer>
      <!-- 页脚内容 -->
    </footer>
  </body>
</html>

内容的提问来源于stack exchange，提问作者锛极锛�,html;css"