CSS clearfix alternative for fixed-position children

Question

I know that clearfix is a way to deal with the zero-height container issue for floating elements.

But, I am wondering if there is any clearfix-like way for fixed elements?

I am stuck and getting clearfix from the method.

.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) */
}

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

Run codeHide result

Answer 1

TL; DR; no.

, , , - div ( ), , div , , , , overflow: hidden;.

position: absolute; , position: relative; - , position: relative; parent , .

position: absolute; div.

position: fixed; position: relative; . position: fixed; , ..

- "" div. height min-height, .

, :

, -.

, , min-height height , -, , .

2, , , , - .

JS, , .

Answer 2

, , , . , , . clearfix.

, div. ., , .

.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) */
}

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

Hide result

Answer 3

fixed, absolute, . .
, , . fixed , ? !

, , div height min-height .