Question

我在这里阅读了教程http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/，并说：

解决页脚问题我需要在页脚上使用css clear：

#footer {
  clear: both;
}

我尝试没有css清除并且只使用了css float：对于页脚，我在包括移动设备在内的多个浏览器上进行了测试，看起来没问题，所以对于2列布局没有使用css clear有什么不对？是否存在布局会破坏我的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>

Answer 1

当您的页脚设置为float: left; width: 100%时，您不会发现问题，因此对于内容流，您会看到它显示在页面中的其他元素下方。浮动和宽度的组合意味着页脚只显示100％宽度的位置，在您的情况下，它在其他内容之下。

如果您关闭float: left，您会看到它破坏了您的布局：

我是否真的需要css清除带有页眉和页脚的2列布局？

1 个答案:

JS Fiddle 1

JS Fiddle 2

JS Fiddle 3