Css float 相对于祖先或早期兄弟定位元素

我有下面的代码，这给了我想要的外观，但我总是觉得文档顺序不正确，因为侧边栏应该稍后出现：

<h1>header</h1>
<div style="float:right">variable height sidebar</div>
variable height content
<h2>sub-section</h2>

标题
可变高度边栏
可变高度内容
小节

桌面上的侧边栏可以扩展到以下部分，这很好。我宁愿有一个大的空白（即h2不清楚：对）

然而，在移动平台上，我想将侧边栏线性化，并将其放在内容之后。因此，我必须更改文档顺序，并使其看起来像以前一样。显然，我可以这样做：

<h1>header</h1>
<div style="overflow:auto">
    <div style="float:left">variable height content</div>
    variable height sidebar
</div>
<h2>sub-section</h2>

标题
可变高度内容
可变高度边栏
小节

如果内容较短，则在内容下方留一个较大的间隙。 但我想知道是否有可能保持内容“未浮动”，但仍将侧边栏放在桌面上的h2元素下

我最早关心的浏览器是IE7。我不想要JavaScript解决方案。我尝试过负的顶部边距，我尝试过绝对内部相对定位，使用包装器元素，但都没有给出一个好的解决方案。总结：我希望侧边栏按文档顺序排在第二位；在台式机上，我希望h2清除内容，而不是侧边栏，侧边栏位于h1下方的右上角；在手机上，我希望内容和边栏都在流中

---

这可能吗？

您是否考虑过将内容物包装在容器中？例如：

<div id="content">
  <h1>Header</h1>
  <h2>sub-section</h2>
</div>

<div id="sidebar">
  variable height sidebar
</div>

---

如图所示。

根据我对任务的理解，您需要以下内容：

如果您需要侧边栏位于所有内容的底部，并且只针对现代移动平台，那么您可以尝试使用媒体查询中的

flexbox

或

table

行为来更改元素的垂直顺序

adactio.com上有两篇关于这个问题的文章：

---

js小提琴来展示一个例子？乍一看，我会说将侧边栏放在

（或者

，如果是HTML5），这样您就可以对演示文稿进行更细粒度的控制-这是一个一般提示，而不是解决方案在这一点上

flexbox

解决方案将适用于手机，但意味着对于桌面，文档顺序必须首先保持侧边栏（因为IE<10不支持它）.display:table caption解决方案虽然允许文档重新排序，但用于顶部导航，而不是侧边栏，并且使用

right

，尽管已被弃用，但仍不会提供与

float:right

相同的行为。请向上投票，查看指向我最喜欢的CSS博客之一的相关和最新链接：-）您不必在桌面和移动平台上的flexbox/table上进行布局，只需通过媒体查询在移动平台上进行，CSS足够灵活，可以在桌面和移动平台上进行完全不同的布局。是的，我理解这一点。我的意思是，我想先记录内容的顺序，因此CSS对侧边栏显示的支持需要放在我最低端的桌面浏览器上。我对手机没有问题，这只是最终更改文档顺序的原因。我现在正在尝试嗅探IE7及其以下版本，并使用

display:table

而不是floating，以旧的文档顺序（nav-first）和其他所有内容首先获取内容。侧边栏下的空白更容易接受。啊！我希望，我终于理解了任务，用一个布局示例更新了答案。如果我理解错了，请纠正我。是的，你现在理解了我试图实现的布局。记住，问题是“是否有可能避免浮动内容？”JSFIDLE代码仍然如此。我对它做了一点修改：在侧边栏之后取消所有的浮动，我们就可以大致达到我在堆栈溢出时的位置了！如果答案是“否”，请添加一个新答案，我就接受它；-）

#content {
  float: left;
}

#sidebar {
  float: right;
}