对于带有页眉和页脚的两列布局，我真的需要css清除吗？
我在这里读过教程，上面说： 要解决页脚问题，我需要使用css清除页脚：对于带有页眉和页脚的两列布局，我真的需要css清除吗？,css,css-float,Css,Css Float,我在这里读过教程，上面说： 要解决页脚问题，我需要使用css清除页脚： #footer { clear: both; } 我尝试不使用css clear，只使用css float:right for footer，我在包括mobile在内的多个浏览器上进行了测试，结果似乎还可以，那么不使用css clear进行2列布局有什么错呢？是否存在布局会破坏我的css样式的情况（在iframe内或任何情况下） 2列布局 #标题{ 背景颜色：黄色； 浮动：左； 宽度：100%； } #页脚{ 背景颜
#footer {
clear: both;
}
2列布局
#标题{
背景颜色：黄色；
浮动：左；
宽度：100%；
}
#页脚{
背景颜色：橙色；
浮动：左；
宽度：100%；
}
左分区{
浮动：左；
}
右分区{
浮动：对；
}
.栏目{
宽度：50%；
}
img{
浮动：对；
边距：0.01米1米；
}
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Mauris ante Legula，facilisis sed ornare eu，lobortis in odio。这是一个巨大的挑战。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门。克拉斯·ac·利奥·普卢斯。毛里斯·奎斯·迪亚姆·维利特。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Mauris ante Legula，facilisis sed ornare eu，lobortis in odio。这是一个巨大的挑战。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门。克拉斯·ac·利奥·普卢斯。毛里斯·奎斯·迪亚姆·维利特。
页脚
float:left；宽度：100%float:left清除：两个样式，您将看到，将清除以前的浮动，页面的流将恢复：
另一种方法是使用固定的“粘性”页脚，固定在页面底部，您可以消除上述两种漏洞：
当页脚设置为float:left时，您不会看到问题；宽度：100%
，因此随着内容的流动，您将看到它出现在页面的其他元素下。浮动和宽度的组合意味着页脚将只显示在可以使用100%宽度的位置，在您的情况下，它位于其他内容下
如果关闭float:left
，您将看到它破坏了布局：
如果随后添加清除：两个样式，您将看到，将清除以前的浮动，页面的流将恢复：
另一种方法是使用固定的“粘性”页脚，固定在页面底部，您可以消除上述两种漏洞：
当页脚设置为float:left时，您不会看到问题；宽度：100%
，因此随着内容的流动，您将看到它出现在页面的其他元素下。浮动和宽度的组合意味着页脚将只显示在可以使用100%宽度的位置，在您的情况下，它位于其他内容下
如果关闭float:left
，您将看到它破坏了布局：
如果随后添加清除：两个样式，您将看到，将清除以前的浮动，页面的流将恢复：
另一种方法是使用固定的“粘性”页脚，固定在页面底部，您可以消除上述两种漏洞：
当页脚设置为float:left时，您不会看到问题；宽度：100%
，因此随着内容的流动，您将看到它出现在页面的其他元素下。浮动和宽度的组合意味着页脚将只显示在可以使用100%宽度的位置，在您的情况下，它位于其他内容下
如果关闭float:left
，您将看到它破坏了布局：
如果随后添加清除：两个样式，您将看到，将清除以前的浮动，页面的流将恢复：
另一种方法是使用固定的“粘性”页脚，固定在页面底部，您可以消除上述两种漏洞：
是的，但我仍然不明白为什么我更喜欢clear:两种解决方案而不是添加浮点：left解决方案？“清除”似乎更像是一种技巧，而不是“浮动”：左边感觉很自然？浮动100%宽度的页脚是一种技巧，它只允许页脚跟随页面流动，而不与其他内容重叠。当您希望内容环绕页脚时，通常会浮动元素。就我个人而言，我认为很清楚：这两种方法都比告诉一个元素浮动更自然，因为它不用于包装其他内容
<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>