我真的需要CSS清除帶有頁眉和頁腳的2列布局嗎？

Question

我在這里http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/中閱讀了教程，內容為：

解決頁腳問題，我需要在頁腳上使用css clear：

#footer {
  clear: both;
}

我嘗試不使用css clear，而只使用css float：right作為頁腳，我在包括移動設備在內的多種瀏覽器上進行了測試，這似乎還可以，所以如果不對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% ，所以您看不到任何問題float: left; width: 100% float: left; width: 100% ，因此隨着內容的流動，您將看到它出現在頁面中的其他元素下方。 浮動和寬度的組合意味着頁腳僅在可以使用100％寬度的位置顯示，在您的情況下，該寬度位於其他內容之下。

如果您選擇float: left ，則會看到它破壞了您的布局：

我真的需要CSS清除帶有頁眉和頁腳的2列布局嗎？

問題描述

1 個解決方案

解決方案1
3 2014-07-28 10:59:04

JS小提琴1

JS小提琴2

JS小提琴3

我真的需要CSS清除帶有頁眉和頁腳的2列布局嗎？

問題描述

1 個解決方案

解決方案1 3 2014-07-28 10:59:04

JS小提琴1

JS小提琴2

JS小提琴3

解決方案1
3 2014-07-28 10:59:04