使用float，如何使紫色框正好位于黄色框的下方和蓝色框的右侧？如果我在紫色框上使用clear left，它将在蓝色框的正下方排列，所以这不是一个解决方案。可以在下面的链接上看到图片。谢谢
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Float Demo</title>
<style>
body {
background-color: #FFFFFF;
}
li {
display: inline-block;
}
#box {
width: 200px;
border-style: solid;
border-width: 1px;
border-color: Black;
}
.red {
background-color: red;
float: left;
height: 200px;
}
.green {
background-color: green;
float: left;
height: 200px;
}
.blue {
background-color: blue;
height: 400px;
float: left;
clear: left;
}
.yellow {
background-color: yellow;
float: left;
height: 200px;
}
.purple {
background-color: purple;
float: left;
height: 200px;
}
</style>
</head>
<body>
<div id="box" class=red></div>
<div id="box" class=green></div>
<div id="box" class="blue"></div>
<div id="box" class=yellow></div>
<div id="box" class=purple></div>
</body>
</html>
单击此行链接到我在方面遇到问题的文件
将黄色和紫色框包装在它们自己的div中。此外，为框使用一个类而不是多个id-让多个元素共享同一id是不好的形式。
<!DOCTYPE html>
<html>
<head>
<style>
.lv-1 { float: left; }
.box {
width: 200px;
height: 200px;
border: 1px solid black;
}
#red { background-color: red; }
#green { background-color: green; }
#blue {
background-color: blue;
height: 400px;
clear: left;
}
#yellow { background-color: yellow; }
#purple { background-color: purple; }
</style>
</head>
<body>
<div id='red' class='box lv-1'></div>
<div id='green' class='box lv-1'></div>
<div id='blue' class='box lv-1'></div>
<div class='wrap lv-1'>
<div id='yellow' class='box'></div>
<div id='purple' class='box'></div>
</div>
</body>
</html>
jsfiddle：https://jsfiddle.net/jpqq99h9/
添加一个会溢出黄色框+蓝色框但不会仅溢出蓝色框的边距：
类似(1600x900屏幕)：
.purple {
margin-right: 1000px;
}
为了给出一个可用的答案，您可以使用calc来获得每个屏幕的正确裕度：
margin-right: calc(100% - 404px); /* each box is 200px + 2px of border */
我会将红色、绿色和蓝色作为内联块元素放在div中，但绝对定位蓝色。确保div具有相对位置。黄色和紫色也作为以下分区内的内联块元素。