为什么定宽元素不占用浮动元素旁边的空间？ [英] Why doesn't a fixed-width element take up the space beside a floated element?
问题描述
在此 CodePen 中，< aside> 元素包装< article> 元素。
In this CodePen, the <aside> element wraps the <article> element.
但是如果您对< aside> 元素应用宽度（即取消注释宽度：50像素； ），即使在<$ c旁边有足够的空间，< aside> 也会跳转到新行$ c>< article> 元素。
But if you apply a width to the <aside> element (i.e. uncomment width: 50px;), the <aside> jumps to a new row, even though there is enough space to sit alongside the <article> element.
当可用空间时，元素为何不与浮动的< article> 并排放置？
Why doesn't the element sit alongside a floated <article> when space is available?
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
}
aside {
/* width: 50px; */
background: #ccffcc;
}
<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>
推荐答案
将< article> 设为半透明可揭示< aside> 是自动的：
Making the <article> semitransparent reveals what is actually happening when the width of the <aside> is auto:
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> 。 < aside> 中的 text 环绕< article>
That's right: the <aside> element's box stretches horizontally to fill the <section>, disregarding the floating <article> altogether. It's the text within the <aside> that wraps around the <article>, not the box.
因此，将< aside> 的宽度设置为小于浮动的< article> ，实际上没有 空间供文本放在< article>旁边; ！由于文本总是喜欢向下流动而不是水平溢出，因此这导致文本向下移动。实际上，这会导致< aside> 元素的框的高度增加，这在您再次使< article> 半透明：
So by giving the <aside> a width that is much less than that of the floating <article>, there is in fact no room for the text to sit next to the <article>! This results in the text moving downward instead, since text will always prefer flowing downward to overflowing horizontally. This actually causes the <aside> element's box to increase in height, which can be seen when, again, you make the <article> semitransparent:
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> 。
So why doesn't the in-flow <aside> box itself become narrower or shift downward in response to the float? That's simply because floating takes an element out of the flow. And that's why the initial layout of the <aside> disregards the <article> altogether.
那么为什么文本会围绕浮点数缠绕？因为整点浮点数是将文本包裹在一个浮动对象上，就像人们阅读文本时完全要点一样。
Why does the text wrap around the float, then? Because the entire point of floats is to have text wrap around a floating object, much like how the point of having text at all is for people to read it.
请注意，仅当< aside> 为流入没有建立块格式上下文的块框。如果您也将< aside> 浮动，则显然它将位于< article> 旁边那么您有两个浮点数，两个浮点数自然会彼此对齐。
Note that this only applies when the <aside> is an in-flow block box that doesn't establish a block formatting context. If you float the <aside> too, obviously it will sit right next to the <article>, since then you have two floats, and two floats will naturally line up with one another.
如果您应用 overflow：隐藏，导致< aside> 建立块格式化上下文，然后确实坐在<旁边; article> ，即使它不是浮动的（实际上，这也防止了文本完全绕过浮动）：
And if you apply overflow: hidden, causing the <aside> to establish a block formatting context, then it does sit next to the <article>, even though it's not floating (in fact, this prevents the text from wrapping around the float altogether):
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 会导致这是一种不直观的副作用，具有一些历史。
While floats never intrude into other block formatting contexts by nature, the fact that overflow: hidden causes this is an unintuitive side effect that has a bit of history behind it.
这篇关于为什么定宽元素不占用浮动元素旁边的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
