바닥 글 텍스트가 바닥 글 배경에서 이동했습니다.

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 코드 : 바닥 글이 어린이 div의에 수레를 삭제하지 않기 때문에 이런 일이

.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

. 한 가지 해결책은 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는 댓글 용으로 /* */만을 허용합니다.

옵션 2 :

바닥 글 어린이 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/