如何将footer置于main下方？前端布局定位问题求助

直接清除浮动（最快见效） #

给footer元素添加CSS样式：clear: both;，这会强制footer跳到所有左/右浮动元素的下方，直接解决错位问题。

修复Main容器的高度塌陷问题 #

如果main里的子元素用了float，哪怕main是flex容器，也可能出现容器高度塌陷（没法包裹住浮动子元素），导致footer往上窜。可以给main加：

• overflow: hidden;：触发BFC（块级格式化上下文），让main自动包裹所有浮动子元素，高度正常后footer自然就在main下方。
• 更彻底的方式：既然main已经用了flex布局，把原本用float的子元素改成flex子项，用justify-content、align-items这些flex属性控制排列，直接删掉float属性，从根源避免浮动带来的问题。

给Footer独立创建格式化上下文 #

给footer加以下CSS，让它不受外部浮动元素的影响：

footer {
  overflow: auto; /* 用hidden、scroll也能达到效果 */
  clear: both; /* 配合clear属性更稳妥 */
}

内容的提问来源于stack exchange，提问作者thmAtei