3

My question is a little different from the following CSS Float Logic. My question is about the concept heightmore concret than that.
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?

Community
  • 1
  • 1
showkey
  • 482
  • 42
  • 140
  • 295
  • I asked this question before and received a very good response. http://stackoverflow.com/questions/30858717/css-float-logic – Zze Apr 26 '16 at 01:43

1 Answers1

2

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>
Quentin Roy
  • 7,677
  • 2
  • 32
  • 50
  • I have a wrong understanding about `A floating box must be placed as high as possible`. – showkey Apr 24 '16 at 09:35
  • It does not mean you have to provide it with drugs ;-D. – Quentin Roy Apr 24 '16 at 09:37
  • The height here means from the bottom of body to the box bottom already floated,suggested that a wood floatting on the water, buoyant force make wood float as high as possible.In my example box5 is the hightest ,box4 is the lowest. – showkey Apr 24 '16 at 09:39
  • I am not sure I understand what you mean. Maybe a simple way to put it is "The higher a box is, the closer his topmost side is to the top of the page". – Quentin Roy Apr 24 '16 at 09:42
  • It is the same as mine. – showkey Apr 24 '16 at 09:44
  • I think that for the system, `box4` and `box5` are equally high. Though I am not sure it matters much. – Quentin Roy Apr 24 '16 at 09:46
  • box5 are higher than box4,to see the bottom of box not the top of the box.You can test it to change box6 `float right` as `float left`,box6 will be stacked at the left of box5, if you change the height of box4 into same height as box5,then box6 will be satacked at the left of box4.It is tested by the fact in this example. – showkey Apr 24 '16 at 09:51
  • We can't explain what happened exactly if not to talk about the bottom of the previous floated box. – showkey Apr 24 '16 at 09:58
  • OK. I see what you mean. That is one way to see it. – Quentin Roy Apr 25 '16 at 05:06