Question

我知道 clearfix 是一种解决浮动元素的零高度容器问题的方法。

但是，我想知道固定元素是否有任何类似clearfix的方式？

我陷入困境并且从clearfix方法获得了任何地方。

＆＃13;

.navbar-float {
  background-color: #adadad;
  float: left;
}

.navbar-fixed {
  background-color: #dadada;
  position: fixed;
}

div.clearfix {
  border: 1px solid #adadad;
  padding: 4px;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

＆＃13;

<div class="clearfix">
  <nav class="navbar-float">
    Float
  </nav>
</div>
<br/>
<br/>
<br/>
<div class="clearfix">
  <nav class="navbar-fixed">
    Fixed
  </nav>
</div>

＆＃13;

Answer 1

<强> TL;博士;无

这种设置无效或无法使用此设置的原因是因为文档的流动方式 - 当您添加具有相对定位的元素而没有浮动到另一个div（作为孩子）），您正在更改文档的流程，因为父div将拉伸以适应或溢出导致滚动条，或者如果设置了overflow: hidden;则没有滚动条溢出。

对于position: absolute;，该元素在技术上不再适用于文档流程，但在下一个position: relative;父项的流程中 - 它也不关心其他元素，但{ {1}}父确实仍然关心它的位置。

这使得position: relative;非常适合在同一div中的其他元素之上覆盖操作。

position: absolute;更进一步，只是忽略任何position: fixed;或任何元素的任何类型的定位。 position: relative;将您的元素位置绑定到视口，而这样可以让您拥有这些固定的标题等...

但正因为如此，你再也不能包含＆＃39; div。您必须知道它的高度并在容器上应用position: fixed;或height来创建所需的间距。

您正在评论对其他答案的评论：

标题的高度在每种视口中都是动态的

我将假设您在不同的媒体查询中有不同的高度。

您可以执行的操作是将需要包含固定导航栏的元素的min-height或min-height属性添加到这些媒体查询中，以使其随设计一起增长，但它会“总是保持猜测。

许多网站只有2个大小的标题，一个用于桌面，有点高，响应版本 - 但它们总是有一个设定的高度而不是动态的。

通常会溢出菜单和其他东西，并用JS增强它们，但我不知道你的情况，所以我没有对此做出任何猜测。

Answer 2

固定元素相对于视口定位，这意味着即使滚动页面，它也始终保持在同一位置。您可以使用top，right，bottom和left属性将固定元素放置在视口上的任何位置。你不需要clearfix。

但是在这个你不需要固定布局，相反你应该绝对相对于父div来定位你的元素。例如，请参阅下面的代码。

＆＃13;

.navbar-float {
  background-color: #adadad;
  float: left;
}

.navbar-fixed {
  background-color: #dadada;
  position: absolute;
}

div.clearfix {
  border: 1px solid #adadad;
  padding: 4px;
  height:20px;;
  position:relative;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

＆＃13;

<div class="clearfix">
  <nav class="navbar-float">
    Float
  </nav>
</div>
<br/>
<br/>
<br/>
<div class="clearfix">
  <nav class="navbar-fixed">
    Fixed
  </nav>
</div>

＆＃13;

Answer 3

fixed与absolute一样，会将元素与网站流分开。没有办法使用固定元素来影响父母我不知道你想要完成什么，但这是错误的方式。您是否在元素上尝试fixed然后滚动？元素将保留在视口中！

如果您想留出空间以使导航栏不与您的内容重叠，请添加div height或min-height作为间隔符。

具有固定位置的儿童的CSS clearfix替代方案

3 个答案: