CODEWITHSUNDEEP
htmlcsscss-float
mqklin
mqklin

Reputation: 2048

why float collapse does not arise with fixed position

I play with floats and I noticed then "float collapse bug" does not arise with fixed position. Here is example.

So I have two divs:

<body
    <div class="static">
        <img>
        <p>text text text</p>
    </div>
    <div class="fixed">
        <img>
        <p>text text text</p>
    </div>
</body>

First with static position and second with fixed:

.fixed, .static{
    outline: 1px solid black;
    width: 150px;
}
.fixed{
    position: fixed;
    left: 200px;
    top: 200px;
}
img{
   float: right;
   background-color: green;
   width: 100px;
   height: 100px;
}

And result:

result

So why the second fixed-div does not need something like .clearfix to fix float collapse?

Upvotes: 0

Views: 108

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

if you want them both to appear the same you can put in overflow-y:hidden;

https://jsfiddle.net/1nq8b7xs/3/

or if you want them to appear beside each other use display:inline-block and remove position-fixed from your fixed class

https://jsfiddle.net/1nq8b7xs/4/

.fixed, .static{
    outline: 1px solid black;
    width: 150px;
    overflow-y:hidden;  /*added this*/
}
.fixed{
    left: 200px;
    top: 200px;
}
img{
   float: right;
   background-color: green;
   width: 100px;
   height: 100px;
}
.fixed, .static{display:inline-block;}
<body>
    <div class="static">
        <img>
        <p>text text text</p>
    </div>
    <div class="fixed">
        <img>
        <p>text text text</p>
    </div>
</body>

Upvotes: 1

Felix A J
Felix A J

Reputation: 6480

Because position: fixed; creates Block formatting context.

Try the below styles also, which have similar effect in your div.

  • float
  • position absolute and fixed
  • display - inline-blocks, table, table-cells
  • overflow - hidden, auto

Upvotes: 3

Related Questions