我怎么能把nav高于它是使用浮动和清除?

Question

我需要重新创建的结构

我需要把右下角的矩形放在蓝色的正方形下面，就像在左边一样，我遇到了麻烦。我必须使用float和clear。目前的利率太低了。只有形状才重要。

.blok1_1 {
background-color: cornflowerblue;
width: 450px;
height: 330px;
float: left;
}
.blok1_2 {
background-color: cornflowerblue;
width: 362px;
height: 330px;
float: right;
clear: right;
}
.blok1_3 {
background-color: yellow;
width: 1075px;
height: 855px;
float: right;
}
.blok1_4 {
background-color: mediumspringgreen;
width: 450px;
height: 520px;
float: left;
}
.blok1_5 {
background-color: mediumspringgreen;
width: 360px;
height: 525px;
float: right;
clear: both;
}

<nav class="blok1_1">
</nav>
<nav class="blok1_2">
</nav>
<section class="blok1_3">
</section>
<nav class="blok1_4">
</nav>
<nav class="blok1_5">
</nav>

Answer 1

最简单的方法是使用flex

#container{
display:flex;
margin:0 auto;
justify-content:center;
}
.end{
display:flex;
flex-direction:column;
}
.top{
width:150px;
height:200px;
background-color:lightblue;
}
.bot{
width:150px;
height:400px;
background-color:green;
}

#middle{
width:150px;
height:600px;
background-color:yellow;
}

<div id='container'>
<div class='end'>
<div class='top'></div>
<div class='bot'></div>
</div>
<div id='middle'>
</div>
<div class='end'>
<div class='top'></div>
<div class='bot'></div>
</div>
</div>

Answer 2

所以我认为这是一个具有相当特定需求的练习。在这种情况下，我不认为DCR的答案是足够的，尽管我不得不说，这可能是当今现实世界的解决方案。特别是浮动被flex取代的部分，html结构在一些网格中被改变，比如左、中、右部分的结构。我完全相信这是一条正确的路。

但是因为这是一个练习，使用float和clear是你唯一的选择。看看下面的代码!

• 为4个方形元素使用一个容器。
  (中间的黄色部分只是容器的背景)
• 左元素左浮动，右元素右浮动
• 既然你想让底部的正方形在顶部的正方形下面，而不是在它们旁边，你还可以为这些元素添加明确的左或右规则。

.container {
background-color: yellow;
width: 350px;
height: 300px;
}

.left-top {
background-color: cornflowerblue;
width: 100px;
height: 100px;
float: left;
}

.right-top{
background-color: cornflowerblue;
width: 100px;
height: 100px;
float: right;
}

.left-bottom {
background-color: mediumspringgreen;
width: 100px;
height: 200px;
float: left;
clear: left;
}

.right-bottom {
background-color: mediumspringgreen;
width: 100px;
height: 200px;
float: right;
clear: right;
}

<div class="container">
<div class="left-top"></div>
<div class="right-top"></div>
<div class="left-bottom"></div>
<div class="right-bottom"></div>
</div>