Question

我的问题与以下内容略有不同 CSS Float Logic。我的问题是关于概念height比这更具有建议性这里有规则
https://www.w3.org/TR/CSS22/visuren.html#float-rules
point8浮动箱必须尽可能高 Point9指出左侧浮动框必须尽可能地放在左侧，一个右侧浮动框尽可能向右，并且较高位置优先于左侧/右侧的位置。现在这是我的例子。

＆＃13;

 

    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;
        }

＆＃13;

    <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>

＆＃13;

＆＃13; 这是我得到的。在我的例子中，与point8和point9存在冲突。如何解释浏览器解析css的默认行为？

为什么不能得到如下结果？

我和Quentin Roy之间至少有一个混乱的概念，检查下面的讨论，A floating box must be placed as high as possible是什么意思？
特别是这里的high这个词？在Quentin Roy看来，box4和box5在我的例子中同样很高。在我看来，box4是最高的，box5是最低的，box3只是在它们的中间。

我的前端专家请在这里展示你对我的例子的正确解释，以结束辩论 1 high中A floating box must be placed as high as possible的含义是什么？ 2哪个是最高的，哪个是box3和box4和box5中最低的？

Answer 1

你自己回答：

浮动框必须放置得尽可能高

和

更高的位置优于更远的位置左/右

这正是发生的事情。该算法首先尝试找到div可以适合的最高自由区域，然后将div放在最右边的位置（在float: right的情况下）。结果，box6在右侧的位置稍微偏小，因此它可以更高。

如果它不是您想要的，一种解决方案是使用不可见的“间隔”来填充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>

另一个解决方案是利用float: left永远不会出现在float: right的右边，反之亦然的事实。因此，如果您找到一种方法让box3向左浮动而不是向右浮动，box6将不会在他的左侧，因此，它将位于其上方。这并非总是可行，但在这种情况下，如果您在 box3和{{之后插入，则可以在向左浮动（而不是向右）的同一位置放置box4 1}}：

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; }

“高”的含义是什么？浮动箱必须尽可能高。？

1 个答案: