html - 页脚在上方，当我将浮点值设置为正确时

Question

我是 CSS 新手。我试图将页脚放在内容部分下。每当内容变大时，页脚将根据内容设置其位置。但我做不到。这是网站的图片。我希望它是双向网站，右边是内容，左边是推文。如您所见，页脚如何出现在上方。

实际上，当我将 Aside 的浮点值设置为右侧时，页脚位于上方。如果没有，页脚会按我想要的方式工作。

这些是代码:

内容在这里 推文到这里

这些是 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 中给你的页脚 clear:both

此外，如果您希望您的 section 和 aside block 并排放置，您可以将它们都向左浮动，并且它们的组合宽度(包括边距)应为 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;
}