制作<article>半透明揭示了当宽度的情况下实际发生的情况<aside>是自动的：
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
opacity: 0.5;
}
aside {
/* width: 50px; */
background: #ccffcc;
}
<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>
没错：就是<aside>元素的框水平拉伸以填充<section>, 忽略浮动<article>共。这是text内<aside>围绕着<article>，不是盒子。
所以通过给<aside>宽度远小于浮动的宽度<article>，事实上有no文本旁边的空间<article>！这会导致文本向下移动，因为文本总是更喜欢向下流动而不是水平溢出。这实际上会导致<aside>元素的盒子增加高度，当您再次制作<article>半透明：
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
opacity: 0.5;
}
aside {
width: 50px;
background: #ccffcc;
}
<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>
那么为什么不流入<aside>盒子本身会因浮动而变窄或向下移动？这只是因为浮动从流中取出了一个元素。这就是为什么最初的布局<aside>无视<article>共。
那么为什么文本会环绕浮动呢？因为浮动的全部要点是让文本环绕浮动对象 https://stackoverflow.com/questions/32848130/paragraphs-text-does-not-render-below-floated-image-but-paragraph-itself-does/32848166#32848166，就像拥有文本的意义在于人们阅读它一样。
一切我上面已经描述了规范第 9.5 节 https://www.w3.org/TR/CSS22/visuren.html#floats.
请注意，这仅适用于<aside>是一个流入块框，不建立块格式化上下文。如果你浮动<aside>显然它也会坐在旁边<article>，这样你就有了两个花车，两个花车自然会排成一排。
如果你申请overflow: hidden，导致<aside>建立块格式化上下文，然后does坐在旁边<article>，即使它不是浮动的（事实上，这可以防止文本完全围绕浮动）：
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
}
aside {
width: 50px;
background: #ccffcc;
overflow: hidden;
}
<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>
虽然浮动本质上不会侵入其他块格式化上下文，但事实是overflow: hidden因为这是一个不直观的副作用，有一点history https://stackoverflow.com/questions/9943503/why-does-css2-1-define-overflow-values-other-than-visible-to-establish-a-new-b/11854515#11854515在它后面。
