it_is_a_literature it_is_a_literature - 7 months ago 6
HTML Question

Why does `high` mean in `A floating box must be placed as high as possible.`?

There are rules here

https://www.w3.org/TR/CSS22/visuren.html#float-rules

point8 A floating box must be placed as high as possible.

Point9 points out that a left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible and a higher position is preferred over one that is further to the left/right.
Now here is my example.





body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}

<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>
</div>
</body>




Here is what i got. There are conflicts with point8 and point9 in my example. How to explain the default behaviour of browser to parse the css?

enter image description here

Why can't got the result as below?

enter image description here

There is a confused concepts between me and Quentin Roy at least ,to check the discussion as below, what does
A floating box must be placed as high as possible
mean?

Especially the word
high
here?

In the opinion of Quentin Roy, box4 and box5 are equally high for my example.
In my opinion, box4 are highest ,box5 are lowest ,box3 just in the middle of them.

My fore-end experts please show your correct interpretations on my example here ,to end the disccusion.

1 What does
high
mean in
A floating box must be placed as high as possible
?

2 Which is the highest and which is the lowst among box3 and box4 and box5?

Answer

You answered it yourself:

A floating box must be placed as high as possible

and

a higher position is preferred over one that is further to the left/right

This is exactly what is happening. The algorithm first try to find the highest free area where your div can fit, then put the div at the rightmost position (in the case of float: right). As a result, box6 is positioned a little bit less on the right so it can be higher.

If it is not what you want, one solution is to use an invisible "spacer" to fill the hole underneath box5.

body{
        margin:0px;
        }
    div.box{
        width:640px;
        height:800px;
        }
    div.box1{
        width:500px;
        height:100px;
        background-color: red;
        float:left;
        }
    div.box2{
        width:140px;
        height:140px;
        background-color: blue;
        float:left;
        } 
    div.box3{
        width:140px;
        height:200px;
        background-color: yellow;
        float:right;
        }
    div.box4{
        width:250px;
        height:300px;
        background-color: green;
        float:left;
        margin-top:-40px;
        }
    div.box5{
        width:250px;
        height:200px;
        float:left;
        background-color: purple;
        margin-top:-40px;
        }
    div.box6spacer{
      width: 250px;
      float:left;
      box-sizing: border-box;
      border-width: 5px;
      border-style: solid;
      border-color: lightgray;
      color: lightgray;
      height: 40px;
    }
    div.box6{
        width:100px;
        height:120px;
        float:right;
        background-color: red;
        }
<body>
    <div class="box">
        <div class="box1">box1
        </div>
        <div class="box2">box2
        </div>
        <div class="box3">box3
        </div>
        <div class="box4">box4
        </div>
        <div class="box5">box5
        </div>
        <div class="box6spacer">spacer
        </div>
        <div class="box6">box6
        </div>
    </div>
    </body>

Another solution is to make use of the fact that a float: left will never go on the right of a float: right and vice-versa. As a result, if you find a way to make box3 floating left instead of right, box6 won't go on his left and thus, will be on top of it. This is not always possible but in this case, you can have box3 at the same position while floating left (instead of right) if you insert it after box4 and box5:

body{
        margin:0px;
        }
    div.box{
        width:640px;
        height:800px;
        }
    div.box1{
        width:500px;
        height:100px;
        background-color: red;
        float:left;
        }
    div.box2{
        width:140px;
        height:140px;
        background-color: blue;
        float:left;
        } 
    div.box3{
        width:140px;
        height:200px;
        background-color: yellow;
        float:left;
        }
    div.box4{
        width:250px;
        height:300px;
        background-color: green;
        float:left;
        margin-top:-40px;
        }
    div.box5{
        width:250px;
        height:200px;
        float:left;
        background-color: purple;
        margin-top:-40px;
        }
    div.box6{
        width:100px;
        height:120px;
        float:right;
        background-color: red;
        }
<body>
    <div class="box">
        <div class="box1">box1
        </div>
        <div class="box2">box2
        </div>
        <div class="box4">box4
        </div>
        <div class="box5">box5
        </div>
        <div class="box3">box3
        </div>
        <div class="box6">box6
        </div>
    </div>
    </body>