頁腳在上面，當我設置浮動值的權利

Question

我在這裏是新的和CSS。我正嘗試將我的頁腳放在內容部分下。只要內容變大，頁腳就會根據內容設置其位置。但我做不到。 這是網站的圖片。我希望它是雙面的網站，正確的內容和留下的推文。當你看到上面有多少頁腳。

實際上，當我將Aside的浮點值設置爲正確時，Footer會出現在上面。如果沒有，Footer按我的需要工作。

這些代碼：

內容來這裏 鳴叫來這裏

這些CSS代碼：

section { 
    float: left; 
    margin-right: 5%; 
    margin-left: 5%; 
    width: 55%; 
    padding-top: 10px; 
} 


aside { 
    margin-right: 5%; 
    width: 40%; 
    margin-left: 5%; 
    padding-top: 10px; 
    float: right; 
} 


footer { 
    height: 30px; 
    background-color: #ca171b; 
    border-radius: 10px; 
    border-bottom-style: groove; 
    border-bottom-color: rgba(0,0,0,1); 
    border-bottom-width: 8px; 
    border-left-style: ridge; 
    border-left-color: rgba(0,0,0,1); 
    border-left-width: 3px; 
    border-right-width: 3px; 
    border-right-style: ridge; 
    border-right-color: rgba(0,0,0,1); 
    font-family: "Arial Rounded MT Bold"; 
    font-size: 1.2em; 
    color: #FFFFFF; 
    text-align: center; 
    font-weight: bold; 
    margin: 5%; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    z-index: 1; 
} 

Answer 1

在你的CSS給你的頁腳明確：既

此外，如果你想讓你的部分和旁邊的塊並排，你可以將它們都浮起來，並且它們的合併寬度（包括邊距）應該是b È100％..或更少

https://jsfiddle.net/sgey3698/1/

section { 
float: left; 
width: 55%; 
margin-right: 5%; 
background: white; 
padding-top: 10px; 
} 


aside { 
width: 40%; 
padding-top: 10px; 
float: left; 
} 


footer { 
height: 30px; 
background-color: #ca171b; 
border-radius: 10px; 
border-bottom-style: groove; 
border-bottom-color: rgba(0,0,0,1); 
border-bottom-width: 8px; 
border-left-style: ridge; 
border-left-color: rgba(0,0,0,1); 
border-left-width: 3px; 
border-right-width: 3px; 
border-right-style: ridge; 
border-right-color: rgba(0,0,0,1); 
font-family: "Arial Rounded MT Bold"; 
font-size: 1.2em; 
color: #FFFFFF; 
text-align: center; 
font-weight: bold; 
margin: 5%; 
padding-top: 5px; 
padding-bottom: 5px; 
z-index: 1; 
clear: both; 
}