强制 div 容器清除流量答案

【问题标题】：Force clear flow for div container强制 div 容器清除流量
【发布时间】：2019-09-26 03:40:12
【问题描述】：

我在test page 上使用此代码来清除标头容器浮动，但不起作用。我可以以某种方式强制它吗？

#header-container{
  position: relative !important;
  clear: both !important;
  overflow: auto !important;
}

【问题讨论】：

【解决方案1】：

使用这种方法：

#header-container:after {
  content: ' ';
  line-height: 0;
  display: block;
  clear: both;
  *zoom: 1;       /* trigger hasLayout for IE 6/7*/
}

我还建议看看有才华的 Nicolas Gallagher 的 Micro clearfix

更新：

根据 OP 的解释，（在下面的 cmets）：

该标题容器漂浮在顶部并在我滚动时停留在那里我不想要那个。

这不是清除修复问题，#header-container 的所有子代都浮动。

重点是.viewitem-panel 和.viewitem-inner 元素定位停留在页面底部，标题正下方，.viewitem-inner 有一个overflow-y: scroll; CSS 声明滚动内容。

所以，除非改变布局，否则这个问题是无法解决的。

【讨论】：

@hashem : 哈哈...不要使用它，因为display: table 弄乱了布局，你只是建议我！ :)
@NoobEditor :) 不同。但是我撤回了我的建议:)
@PescuVili 好吧，我认为#header-container 没有任何问题。你能解释更多吗？
@NoobEditor 我只是建议避免在整个页面布局中使用table 的东西。 table 显示的项目如果在正确的方向上使用是没有问题的。
我需要在像 spideradvices.blogspot.ro/2014/01/test-4.html 这样的静态页面中清除 header-container 的浮动，这里似乎没有任何建议

【解决方案2】：

将clear 放在一个单独的类中

.clearfloat{clear: both}

然后把它放在你想要的div之后clearfloat

<div id="header-container">
</div>
<div class="clearfloat"> </div>

【讨论】：