无法清除两个堆叠的Singularity隔离范围框，否则侧翼框会移动

Question

我构建了以下测试用例：http://www.sassmeister.com/gist/9127157

问题是，一旦布局切换到三列（从bp 1075px开始），我必须将类.cllow和.newsletter的清除切换为无，否则侧推框.contact和.thanks将被推送。但现在.newsletter框堆叠在.follow框上方。

有没有办法用CSS解决这个问题（我已经尝试过clearfix mixins但没有运气）或者是两个类所必需的html标记中的包装div .newsletter和.follow？我没有想法。 :(

提前感谢Ralf

Answer 1

不幸的是，浮动的工作方式，目前使用的HTML无法实现。幸运的是，修复非常简单：包裹<div>！

查看updated SassMeister gist以获取完整解决方案。

基本上，你需要做的是将.follow和.newsletter包装在一个没有属性的包装div中，直到你需要在中间堆叠这两个项目的断点。然后，不是使用奇点来定位这些项目，而是只有100％宽度，.follow浮动left或right，.newsletter清除.follow的方向{1}}浮动（或both)。最后，使用奇点来定位包含<div>。这会将它们堆叠在该区域内，并允许.contact和.newsletter正常定位。