CSS IE7 浮动右键问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1820007/
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
IE7 float right problems
提问by Arnis Lapsa
Html=>
html=>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style='border: 1px solid red; width: 100px;'>
<a href="#">foo</a>
<a href="#"style="border-color: blue; float: right;">bar</a>
</div>
something
</body>
</html>
I got problems with IE7 (IE6 support is not needed)
我在使用 IE7 时遇到问题（不需要 IE6 支持）
On IE7 rendered html looks like this=>
在 IE7 上呈现的 html 看起来像这样=>
I need it to look like this (works on chrome/ie8 at the moment)=>
我需要它看起来像这样（目前适用于 chrome/ie8）=>
What should i change? :)
我应该改变什么？:)
回答by mauris
You need to float both elements and clear it.
您需要浮动两个元素并清除它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#" style="float:left;">foo</a>
<div style="clear:both;"></div>
</div>
something
</body>
</html>
Or simply put the floating element in front of the normal element like this:
或者简单地将浮动元素放在普通元素的前面，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#">foo</a>
</div>
something
</body>
</html>
Brief Explanation:
简要说明：
Pardon my english and drawing, but here's briefly how float and clearing works in cross browser:
请原谅我的英语和绘图，但这里简要介绍了跨浏览器中浮动和清除的工作原理：
An element can be floated left or right. When you have element floating, the element doesn't push "normal" content downwards. See why -
元素可以向左或向右浮动。当元素浮动时，元素不会向下推动“正常”内容。看看为什么——
Float and clear:
浮动和清除：
Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds
图例：橙色/向右浮动、蓝色/向左浮动、灰色线条/清晰分隔线、红色矩形/边界
In this case, you have 2 elements of one line text - one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:bothat the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.
在这种情况下，一行文本有 2 个元素 - 一个向左浮动，另一个向右浮动。浮动时，它不会将内容向下推，也就是占用空间。因此，如果您不使用clear:both灰线，下面的内容将在 2 个浮动元素之间向上堆叠，因此可能不是您想要的。
When you use clear:bothbelow the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram's 2nd and 3rd section.
当您clear:both在浮动下方使用时，浮动下方的内容将被推至最高高度的浮动元素。这显示在图表的第 2 和第 3 部分中。
Float only:
仅浮动：
Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds
图例：橙色/向右浮动、蓝色/正常内容、灰色线/与下一个分割的线、红色矩形/边界
The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you're telling the browser to float from this line.
默认情况下，蓝色普通内容已经存在text-align: left;。因此它是左导向的。您需要将浮动放在正常内容的前面，因为您告诉浏览器从这一行浮动。
You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.
您应该尝试不同的条件以查看其效果：将浮动放在前面，后面，浮动左右，清除两者，清除左右。
回答by Martin Labuschin
Always helpfull for all IE-Float-Combos: Give every float-element a display: inline;
对所有 IE-Float-Combos 总是有帮助的：给每个浮动元素一个 display: inline;
回答by Lark
Try the clear after fix:
修复后尝试清除：
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
