为什么box4不能通过CSS接近box1？

Question

我希望box4和box1彼此靠近，为什么它们之间有间隙？
我把box4放在左边，为什么它不能放在左边？

 div.box{ width:640px; height:500px; margin:0 auto; } 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:300px; background-color: yellow; float:right; } div.box4{ width:250px; height:300px; background-color: green; float:left; } 

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

我得到的是如下：

我想得到的如下：
如何解决？
至于狮子狮子的回答，仍然存在两个问题：
1.为什么我的css无法使box4接近box1，是哪个原因导致的？
请给更多详细的解释。
2.在狮子座狮子的回答中，增加了两行：

    top:108px;
    position:absolute;

我知道什么position:absolute; 意思是这里， top:108px; 这里让我感到困惑，为什么不能设置top:100px; ，box1的高度仅为100px ？？

Answer 1

div.box4 {
   margin-top: -40px;
   width: 250px;
   height: 300px;
   background-color: green;
   float: left;
}

添加margin-top：-40px;

Answer 2

您可能想尝试一下flexbox ：

版本1

使用flex-direction: column;

 body { margin: 0; } div, body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.box { max-width: 640px; height: 500px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } div.box1 { width: 78%; -webkit-box-flex: 0; -webkit-flex: 0 0 100px; -moz-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; background-color: red; max-height: 100px; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } div.box2 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 22%; min-height: 140px; background-color: blue; } div.box3 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 22%; -webkit-box-flex: 1; -webkit-flex: 1 1 300px; -moz-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; background-color: yellow; } div.box4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; width: 22%; -webkit-box-flex: 1; -webkit-flex: 1 1 300px; -moz-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; background-color: green; } 

 <div class="box"> <div class="box1">box1 </div> <div class="box2">box2 </div> <div class="box3">box3 </div> <div class="spacer"></div> <div class="box4">box4 </div> </div> 

版本2

使用flex-direction:row （默认），间隔符和负边距（类似于float解决方案）。 相对于浮动解决方案的优势：

1. 调整.box3和.box4的底部
2. 反应灵敏

 body { margin: 0; } div, body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.box { max-width: 640px; min-height: 500px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.box1 { -webkit-box-flex: 1; -webkit-flex: 1 1 78%; -moz-box-flex: 1; -ms-flex: 1 1 78%; flex: 1 1 78%; background-color: red; max-height: 100px; } div.box2 { -webkit-flex-basis: 22%; -ms-flex-preferred-size: 22%; flex-basis: 22%; min-height: 140px; background-color: blue; } div.box3 { -webkit-box-flex: 0; -webkit-flex: 0 1 22%; -moz-box-flex: 0; -ms-flex: 0 1 22%; flex: 0 1 22%; margin-top: -70px; min-height: 300px; background-color: yellow; } div.box4 { -webkit-box-flex: 0; -webkit-flex: 0 1 22%; -moz-box-flex: 0; -ms-flex: 0 1 22%; flex: 0 1 22%; min-height: 300px; background-color: green; } .spacer { -webkit-box-flex: 1; -webkit-flex: 1 1 0; -moz-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0 } 

 <div class="box"> <div class="box1">box1 </div> <div class="box2">box2 </div> <div class="box3">box3 </div> <div class="spacer"></div> <div class="box4">box4 </div> </div>