aside无法与article并排浮动问题（仅用float实现）

嘿，我一眼就瞅出问题啦！你当前的<aside>是嵌套在<article>标签内部的，这就导致哪怕给aside加了float:right，它也只能在article的内部空间里浮动，根本没法跑到article的旁边去。这是结构层面的问题，先把结构调整对，再用float就能轻松实现你要的并排布局了。

第一步：调整HTML结构 #

把<aside>从<article>里面移出来，让它和<article>成为兄弟元素，都放在<section id="content">下面。修改后的完整HTML代码如下：

<section id="content">
 <header>
 <hgroup>
 <h1>Antwerpen Marathon</h1>
 </hgroup>
 <nav>
 <ul>
 <li><a href="#top">Home</a></li>
 <li><a href="inschrijven.html">Inschrijven</a></li>
 <li><a href="nieuwsbrief.html">Nieuwsbrief</a></li>
 <li><a href="resultaten.html">Resultaten</a></li>
 </ul>
 </nav>
 <div id="intro">
 <div id="rodelogo" class="logo">
 <span id="iam">I An</span>twerpen</div>
 <div id="blauwelogo" class="logo">
 <span id="iam">I An</span>twerpen</div>
 <div id="groenelogo" class="logo">
 <span id="iam">I An</span>twerpen</div>
 </div>
 </header>
 
 <!-- 把aside移到article外面，和article同级 -->
 <article class="rondehoeken">
 <header>
 <div class="streep1"></div>
 <div class="streep2"></div>
 <div class="streep3"></div>
 <div class="streep4"></div>
 <div class="streep5"></div>
 <h1>Titeltje dabei</h1>
 </header>
 <div id="artikel-container">
 <p id="item">
 Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een <em>voorbeeldtekst</em>. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend <abbr title="Islamitische Staat">IS</abbr>. De <strong>faketekst</strong> is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.
 <br />
 Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De <mark>faketekst</mark> is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door. Dit is een <i>faketekst</i>.
 </p>
 </div>
 </article>

 <aside>
 <div id="video-container">
 <video controls width="150" height="250" preload id="videos" poster="images/download.png">
 <source src="images/dunk.mp4" type="video/mp4">
 </video>
 </div>
 <div id="advert1" class="rondehoeken">
 <a href="#">
 <br />
 <br />Recyclen!<br />
 <br /></a>
 </div>
 <div id="advert2" class="rondehoeken">
 <a href="#"><img id="snickers" src="images/bar.png" width="150px" alt="muzieklogo"></a>
 </div>
 <footer>
 <ul class="galerij">
 <li><a href="#"><img src="images/finish1.jpg"></a></li>
 <li><a href="#"><img src="images/finish2.jpg"></a></li>
 <li><a href="#"><img src="images/finish3.jpg"></a></li>
 <li><a href="#"><img src="images/finish4.jpg"></a></li>
 </ul>
 <br /><br /><br /><br />
 <small>&copy; Marathon van Antwerpen</small>
 </footer>
 </aside>
</section>

第二步：优化CSS样式 #

现在结构正确了，我们只需要用float属性控制两个元素的排列，同时处理父容器的浮动塌陷问题：

article {
 float: left;
 width: 540px;
 height: 500px;
 margin: 10px;
 margin-top: 30px;
 /* overflow: scroll; */
 padding: 0 5px 0 5px;
 border: solid 1px #ddd;
 background: -moz-linear-gradient(top, #94bae7 0%, #fff 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#94bae7), to(#fff));
 /* 不需要inline-block，float已经能让它成为块级浮动元素 */
 /* display: inline-block; */
}
#article-container {
 display:inline-block;
}
.rondehoeken {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 display: inline-block;
}
aside {
 /* 移除relative定位代码，不需要它了 */
 /* position: relative; top: -410px; left: 230px; */
 float: right;
 /* 同样不需要inline-block */
 /* display: inline-block; */
 width: 150px;
 margin: 10px;
 margin-top: 30px; /* 和article的margin-top保持一致，对齐顶部 */
 padding: 10px;
 border: 1px solid #ddd;
}

/* 给父容器添加清除浮动的样式，防止高度塌陷 */
#content {
 overflow: hidden;
 /* 或者用clearfix伪元素方案，兼容性更好：
 #content::after {
   content: "";
   display: table;
   clear: both;
 }
 */
}

关键说明 #

1. 结构调整是核心：之前aside嵌套在article里，float只能在父元素内部生效，移出来后两者处于同一层级，float才能让它们并排。
2. 移除不必要的inline-block：float属性已经会让元素脱离文档流并具备块级特性，不需要额外加display:inline-block。
3. 对齐顶部：给aside加上和article相同的margin-top:30px，让两者顶部对齐更美观。
4. 清除浮动：父容器#content添加overflow:hidden（或者clearfix伪元素），解决浮动元素导致父容器高度为0的问题。

这样调整后，article和aside就能在页面有足够空间时完美并排，完全符合你只用float属性的要求！

内容的提问来源于stack exchange，提问作者Nelson Lefelon