在表单中的标签中添加 CSS float 使背景颜色消失

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

只要不清除浮动就正常:

这里是 fiddle http://jsfiddle.net/ym9otf6q/:

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

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

希望对您有所帮助:)

Answer 2

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

要解决这个问题，您可以：

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

Answer 3

将CSS改为：

#register p{
    float:left;
}

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

Working Fiddle

在表单中的标签中添加 CSS float 使背景颜色消失

Adding CSS float to tags in a form makes background color disappear

html

css

css-float