html - 段落元素的背景扩展以填充表格

Question

我有一个包含多个输入和文本区域元素的表单。我还有一些段落文本用作提交按钮，可以在下面的代码中看到。

HTML:

<form action="form.php">
    <input type="text">
    <textarea style="float: left;"></textarea>
    <textarea style="float: right;"></textarea>
    <p id="btn" onclick="document.forms[0].submit();">Submit</p>
</form>

这里是适用于该元素的样式:

CSS:

#btn {
width: 180px;
margin: 40px auto;
background-color: #CFD8DC;
}

它位于表单底部所有其他元素之后。由于某种我无法理解的原因，段落元素的彩色背景扩展到填充表单的高度。宽度也将填充以扩展表单，但已指定宽度。

除了表单元素之间，这似乎不会发生在任何地方。我还想说明，我正在使用 Foundation，但我认为这不会影响它，因为我在其他地方使用相同的样式并且不会出现此问题。

问题:

1. 这是什么原因造成的？
2. 背景如何只显示在表单内的段落元素后面？

Answer 1

这个问题的问题在于它们是提交按钮之前的 float 元素，这会扰乱定位。通过将其应用于段落提交按钮:

clear: both;

背景没有延伸来填充表格。