考虑这种情况:
: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;
}
}
有没有人知道如何解决这个问题,同时不限制内容宽度或使用其他布局模式(flexbox,绝对定位)。不使用溢出的额外点:隐藏,因为它会切割绝对位于布局内的任何内容。