Question

我需要将背景颜色应用于表单。不幸的是，每当我向float: left标签添加p时，背景颜色就会立即消失。

HTML示例如下：

<form id='register'>
    <p><label for='name'> Name: </label>
    <input type='text' id='name' pattern='[a-zA-Z].{3,70}'> </input></p>
    <p><label> email: </label> 
    <input type='email' id='email' placeholder='abc@example.com'></input></p>

导致此问题的CSS如下：

#register p{
float:left;
}

为什么浮动属性会影响背景，我该如何解决呢？

Answer 1

将CSS更改为：

#register p{
    float:left;
}

form {
    background-color:red;
    overflow:auto;
}

Working Fiddle

Answer 2

只要你没有清除漂浮物，它就是正常的：

这是小提琴http://jsfiddle.net/ym9otf6q/：

form { 
  background-color: yellowgreen; 
  overflow:hidden; // Clearing the float
}
p{ float:left; }

以下是此常见问题的更多详细信息：http://www.quirksmode.org/css/clearing.html

希望有所帮助：）

Answer 3

这是一个常见问题，因为浮动元素会创建一个新的block formatting context。

要解决此问题，您可以：

也浮动你的表格。
将overflow: hidden应用于您的表单。
在表单中添加硬编码高度。

将CSS浮点数添加到表单中的标记会使背景颜色消失

3 个答案: