页脚文本从页脚背景移动

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/