IE7漂浮正确的问题
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> 我得到了IE7的问题（不需要IE6的支持）
在IE7呈现的HTML看起来像这样=>
替代文字http://i48.tinypic.com/saxs9d.jpg
我需要它看起来像这样（目前在Chrome / ie8上工作）=>
替代文字http://i49.tinypic.com/2ufgbr4.jpg
我应该改变什么？ 🙂
你需要浮动两个元素并清除它。
<!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>
或者简单地将浮动元素放在正常元素的前面，如下所示：
<!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>
简要说明：
请原谅我的英语和绘画，但这里简要介绍一下跨浏览器的浮动和清理工作：
元素可以左右浮动。 当元素浮动时，元素不会向下推“正常”的内容。 看看为什么 –
漂浮和清除：
图例：橙色/浮动右边，蓝色/浮动左边，灰色线/清除分隔线，红色矩形/边界
在这种情况下，您有一行文本的两个元素 – 一个浮动左侧，另一个右侧浮动。 当浮动时，它不会将内容向下推，也就是占用空间。 因此，如果你不使用clear:both在灰线，下面的内容将堆叠之间的2个浮动元素，因此可能不是你想要的。
当你使用clear:both在浮动体下面，浮动体下面的内容将被推到最高的float元素。 这显示在图表的第二和第三部分。
仅浮动：
图例：橙色/右边浮动，蓝色/正常内容，灰色线/与下一个线分隔的线，红色矩形/范围
蓝色的普通内容已经默认为text-align: left; 。 因此它被定位。 您需要浮动在正常的内容之前，因为您告诉浏览器从这条线漂浮。
你应该尝试不同的条件，看看它的效果：浮在前面，后面，漂浮左右，清除两个，清除左右。
对所有的IE-Float-Combos总是有帮助的：给每个浮点元素一个“display：inline;”
修复后尝试清除：
div:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
