CSS 如何修复 IE7 浮动清除组合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2273107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix IE7 float-clear combination
提问by Mithun Sreedharan
I have a field_wrapper class div which contains the 3 sub divs field_label, field_input and field_error
我有一个 field_wrapper 类 div，其中包含 3 个子 div field_label、field_input 和 field_error
I need to put the field_label, field_input side by side and field_error below the first two.
我需要将 field_label、field_input 和 field_error 并排放置在前两个下方。
Please see below css code to know how i achieved this, My problem is Its is not working in IE7. clear both applied to the field_error is not working.
请参阅下面的 css 代码以了解我是如何实现这一点的，我的问题是它在 IE7 中不起作用。clear 两者应用于 field_error 都不起作用。
Even after googling for a long time i can't find a proper method to fix this without adding the HTML mark-up. Please advice css tip or any other method to avoid extra markup code
即使在谷歌搜索了很长时间后，我也找不到合适的方法来解决这个问题而不添加 HTML 标记。请建议 css 提示或任何其他方法，以避免额外的标记代码
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>
回答by Allan Kimmer Jensen
If you do not want to remove the float left. You can use this wrapper code
如果您不想删除浮动左侧。您可以使用此包装代码
.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }
It works for me every time (IE6 as well)
它每次都对我有用（IE6 也是如此）
Update:
更新：
I looked at this again, and changed the markup a bit, also made it valid xhtml. Just put the class on the P tag, you dont need an extra div.
我又看了一遍，稍微改变了标记，也使它有效的 xhtml。只需将类放在 P 标签上，就不需要额外的 div。
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#f00;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name" />
<p class="field_error">The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">Address</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit" />
</div>
</form>
回答by Zhivago
Remove float:right from 'field_error'
从“field_error”中移除 float:right
回答by Shakeeb Ahmed
let me tell you one thing first. if you having floating content in a container the container never contain it untill and unless you set the container overflow property to hidden or also make it float you. like
让我先告诉你一件事。如果容器中有浮动内容，则容器永远不会包含它，除非您将容器溢出属性设置为隐藏或使其浮动。喜欢
.field_wrapper
{
clear:both;
overflow:hidden;
}
Now it contain all floating element. Now for your error div as you are floating you elements to left, so make clear:left only and it will work.
现在它包含所有浮动元素。现在对于您的错误 div，因为您将元素向左浮动，因此请明确：仅左，它会起作用。
Thanks
谢谢
