我在这里阅读了教程http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/，它说:
解决页脚问题，我需要使用css clear on footer:
#footer {
clear: both;
}
我尝试没有css明确，只是使用css浮动:对页脚，我测试了多个浏览器，包括手机，它似乎是好的，所以不使用css明确的2列布局有什么问题?是否存在布局会破坏我的css样式(在iframe或其他)的情况?
<html>
<head>
<title>
2 column layout
</title>
<style type="text/css">
#header {
background-color: yellow;
float: left;
width: 100%;
}
#footer {
background-color: orange;
float: left;
width: 100%;
}
div.left {
float: left;
}
div.right {
float: right;
}
.column {
width: 50%;
}
img {
float: right;
margin: 0 0 1em 1em;
}
</style>
</head>
<body>
<div id='header'>
header
</div>
<div class='left column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='right column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div id='footer'>
footer
</div>
</body>
</html>
您不会看到问题，因为您的页脚被设置为float: left; width: 100%，所以随着内容的流动，您将看到它出现在页面中的其他元素之下。浮动和宽度的组合意味着页脚只会显示在它可以使用100%宽度的地方，在你的例子中是在其他内容的下面。
如果你把float: left去掉，你会看到它破坏了你的布局:
JS Fiddle 1
如果你然后添加clear: both;样式，你会看到清除修复hack，将清除以前的浮动和页面的流量将恢复:
JS Fiddle 2
另一种选择是使用固定的"粘性"页脚，它固定在页面的底部，你可以消除上述两种技巧: