考虑以下情况:
预期结果:
实际结果:
有人知道如何解决这个问题,而不限制内容宽度或使用其他布局模式(flexbox、绝对定位)。如果不使用overflow:hidden,可以获得额外的分数,因为它会剪切布局内绝对定位的任何内容。
- 有一个具有流体宽度内容的布局,并且固定的侧边栏浮动到右侧。该布局的容器使用clearfix来清除右侧浮动
- 在内容块内部,还有另一个执行相同操作的块。此第二块会扩展到侧边栏的高度,直到它通过
:after { clear: both }
清除了侧边栏的浮动
演示: https://jsfiddle.net/pv6e93px/1/
示例HTML:
<section class="layout">
<aside>main sidebar!</aside>
<div class="wrap">
<article class="article">
<header class="header">
<span class="note">I break stuff!</span>
</header>
<div class="content">
Main content!
</div>
</article>
</div>
</section>
SCSS示例:
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.layout {
@include clearfix();
.wrap {
margin-right: 200px;
background: gray;
}
> aside {
width: 200px;
height: 700px;
float: right;
background: salmon;
}
}
.article {
.header {
@include clearfix();
background: green;
.note {
display: block;
float: right;
background: hotpink;
}
}
.content {
height: 200px;
background: red;
}
}
预期结果:
![enter image description here](https://istack.dev59.com/mAruR.webp)
![enter image description here](https://istack.dev59.com/2tG8e.webp)