Menu
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>
Why can't got the result as below?
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?
247
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
