如何将Flask前端中与H1并排的Form移至其下方？

问题根源 #

默认情况下，<h1>和<form>都是块级元素，会自动上下排列各占一行。出现并排，肯定是CSS给这两个元素（或它们的父容器）加了特殊布局属性，比如浮动、行内显示、flex水平排列。

针对性修复方案 #

情况1：元素被设为行内/行内块显示 #

检查你的CSS，要是有类似下面的代码：

h1, form {
  display: inline-block;
}

修复方式：删掉这行，或者单独给form设置块级显示：

form {
  display: block;
}

解释：块级元素会强制占满父容器宽度，自动换到h1下方。

情况2：元素加了浮动 #

如果CSS里给h1加了浮动：

h1 {
  float: left;
}

修复方式：给form加清除浮动的属性：

form {
  clear: both;
}

或者直接删掉h1的float: left样式。
解释：浮动元素会脱离正常文档流，后面的元素会“贴”上去，clear: both能让form回到浮动元素下方的正常位置。

情况3：父容器用了flex水平排列 #

如果h1和form的父容器（比如一个包裹的div）有这段CSS：

.parent-container {
  display: flex;
}

修复方式：给父容器加垂直排列属性：

.parent-container {
  display: flex;
  flex-direction: column;
}

解释：flex默认是水平排列子元素，改成column就会变成上下垂直排列。

新手调试小技巧 #

打开浏览器按F12调出开发者工具，点选h1或form元素，看右侧「样式」面板，找到display、float、flex相关的属性，临时修改试试效果，确定有效后再写到你的CSS文件里。

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