頁腳文本從頁腳背景移動

Question

我有一個佈局，使用html元素，如&頁腳。問題在於頁腳非常奇怪地顯示：頁腳文本（在底部的紅色背景上的黑色文本）向下移動，而不是以頁腳背景色顯示。填充屬性也似乎工作錯誤。

fiddler

HTML代碼：

<section> 
     <div class='post'> 
      <div class='post-title>'> Title fo post 1</div> 
      <div class='post-subtitle'> 
      <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div> 
      <div class='added-at'>10:10:00 12/12/2014</div> 
      </div> 
      <div class='post-body'> 
      <p>Body Body Body Body Body Body Body Body Body Body Body Body 
      Body Body Body Body Body Body Body Body Body Body Body Body 
      Body Body Body Body Body Body Body Body Body Body Body Body 
      Body Body Body Body Body Body Body Body Body Body Body Body </p>   
      </div>  
     </div>  
     <div class='post'> 
      <div class='post-title>'> Title fo post 1</div> 
      <div class='post-subtitle'> 
      <div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div> 
      <div class='added-at'>10:10:00 12/12/2014</div> 
      </div> 
      <div class='post-body'> 
      <p>Body Body Body Body Body Body Body Body Body Body Body Body 
      Body Body Body Body Body Body Body Body Body Body Body Body 
      Body Body Body Body Body Body Body Body Body Body Body Body 
      Body Body Body Body Body Body Body Body Body Body Body Body </p>    
      </div>  
     </div> 
     </section> 

     <aside> 
     LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! 
     LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU!   
     </aside>  

     <footer> 
      <div style="float: left"> Copyrigth TaxHug All Rights Reserved</div> 
      <div style="float: right"> About Terms Privacy </div>   
     </footer> 

CSS代碼：

.page{ 
    /* center horizontally */ 
    margin-left: auto; 
    margin-right: auto; 
    /* center horizontally */ 

    outline: 1px solid black; 
    width: 960px;  
    } 
    .blue { 
     color: blue; 
    }  
    .added-by { 
     float: left; 
     font-size: 10px; 
    } 

    .added-at { 
     float: right;  
     font-size: 10px; 
    } 

    .post { 
     //background-color: yellow; 
    } 

    .post-subtitle{ 
     //padding: 0 10px;  
    } 

    section 
    { 
    padding: 10px; 
    width: 800px; 
    display: block; 
    //background-color: red; 
    float: left; 
    box-sizing: border-box; 
    } 

    aside 
    { 
    padding: 10px;  
    display: block; 
    float: right; 
    max-width: 150px; 
    background-color: yellow; 
    box-sizing: border-box; 
    } 

    footer { 
    padding: 10px; 
    background-color: red; 
    //box-sizing: border-box; 
    clear: both; 
    } 
/* fix for old browsers */ 
article, aside, figcaption, figure, footer, header, hgroup, nav, section 
{ 
    display: block; 
} 

Answer 1

發生這種情況是因爲頁腳不清除對孩子的div彩車。一種解決方案是使用clearfix techniques之一清除浮標。由於clear:both;在某些情況下並不總是有效。更多信息here和here。

實施例：

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

NEW HTML：

<footer class="clearfix"> 
    .. your code 
</footer> 

NEW CSS：（需要寬度100％頁腳現在）

footer { 
    width:100%; 
} 

DEMO：

http://jsfiddle.net/okfn5m6r/11/

此外，僅供參考，//不是CSS有效的評論。 CSS只接受/* */的評論。

方案二：

從頁腳孩子的div刪除float:left和float:right內嵌樣式。然後使用這個CSS。如果您不想使用clearfix方法，這是一個替代選項。

footer { 
    white-space:nowrap; 
} 
footer div { 
    display:inline-block; 
    width:50%; 
} 
footer div + div { 
    text-align:right; 
} 

DEMO：

http://jsfiddle.net/okfn5m6r/8/