HTML main 显示为 2px 高，而不是充当其子元素的包装器

Question

我的网页有一个“主要”部分，应该包含所有主要元素。子元素都显示正确，但是主要部分显示2px高，所以我无法控制背景颜色。

看这里:

http://lmpcoatings.com

我用红色边框突出显示了主要部分，以便您明白我的意思。

我试过将它的样式设置为 display:block 但这没有用。

Answer 1

这与用于构建布局的 float 有关。这通常会从文档流中删除元素。你需要清除 float 。解决此问题的一种方法是在您的主要元素上使用 overflow:hidden，这将使“主要”意识到它有 child 并计算其高度以适应它。
另一种方法是创建一个空元素作为 main 的最后一个子元素，并使用 clear:both|left|right 属性清除 float 。
您需要选择哪个更适合您。