浮动侧边栏始终向右

Question

我只记得我关于浮动的事情：左;明确：对;让侧边栏始终向右。但这不适合我。

您在图片上看到的问题是侧边栏被分页div推到了网站的底部。

我的标记是：

<article></article>
<footer></footer >
<aside class="sidebar"></aside>

CSS：

aside {
   float:left;
   width: 300px;
   display:inline;
   margin: 0 10px; 
}

Answer 1

将文章和页脚放入div中并向其添加float:left，然后像这样给出侧栏[{1}}：

float:right

CSS：

<div class="left">
    <article></article>
    <footer></footer >
</div>

<aside class="sidebar"></aside>

Answer 2

我会使用宽度百分比仅使用向左浮动并在页脚中清除它，如下所示：

article {
    width: 80%;
    height: 90%;
    background-color: yellow;
}
aside {
    width: 20%;
    height: 90%;
    background-color: blue;
}
footer {
    clear:both;
    width: 100%;
    height: 10%;
    background-color: red;
}

.left{
  float:left;
  }

<article class="left">ARTICLE</article>
<aside class="sidebar left">ASIDE</aside>
<footer>FOOTER</footer>