我一直在弄乱CSS，试图理解浮点数，等等。这是这个问题的样子：
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8zYlNoay5wbmcifQ==” alt =“ CSS浮动重叠”>
如您所见，黄色框漂浮在灰色后面并经过它。如何使其在第二个方框前停下来？ Here is my code：
<style>
/*resests begin*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
/*vertical-align: baseline; */
font-weight:normal;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/*resests end*/
body {
font-size:16px;
margin:5px;
}
h1 {font-size:2em;}
nav {
background-color:#ccc;
padding:5px;
width:200px;
height:200px;
margin:10px;
}
#a {
background-color:#FFC;
padding:10px;
}
.r-set {
padding-left:10px;
float:right;
}
</style>
</head>
<body>
<h1>Title</h1>
<nav class="r-set">
<p><a href="#">Two</a></p>
</nav>
<div id="a">
<h3>One</h3>
</div>
</body>
</html>
[当您浮动元素时，会将其从DOM流中移出。要使其与Box One交互，还需要浮动Box One：
#a {
background-color: #FFFFCC;
float: left;
padding: 10px;
width: 190px;
}
注意，宽度也已指定。这是因为您还要将两个盒子都放在包装纸中并指定其宽度：
HTML
<div id="wrapper">
<h1>Title</h1>
<nav class="r-set">
<p><a href="#">Two</a></p>
</nav>
<div id="a">
<h3>One</h3>
</div>
</div>
CSS
#wrapper{
width: 445px;
}
[无论何时浮动元素，最好将它们放在这样的包装器中，这样就可以将它们带回到DOM中。这样可以避免出现像框2后面的“框一”渲染那样的问题。
这里是一个jsFiddle，将它们组合在一起。顺便说一句，如果您想让Box 2与Box 1完全齐平放置，请取走其左边距。
编辑：
要使Box 2为静态，Box 1为可扩展，您应该使用相同的CSS和标记。只需删除Box One的float和width属性，并为其设置225px的右边距（Box 2的宽度减去右边距）。这是更新的jsFiddle。
您需要在盒子上设置宽度，确切地说，您需要将填充更改为％：
#a {
background-color:#FFC;
padding:1%;
width:58%;
}
.r-set {
padding-left:1%;
float:right;
width:39%;
}
JS小提琴显示得更好：here
[使用float时，请将其添加到float元素的末尾。 （在浮动元素内部。
<div class="clear"> </div>
其中clear具有如下CSS定义。
.clear {
clear: both;
}
或者，如果您不使用clear，则必须明确指定宽度x高度。
使用<div class="clear"> </div> after浮动元素，以防止以下HTML元素不受其浮动影响。
因此，使用clear，您的代码应为：
<nav class="r-set">
<p><a href="#">Two</a></p>
<div class="clear"> </div> <!-- added clear -->
</nav>
<div id="a">
<h3>One</h3>
<div class="clear"> </div> <!-- added clear -->
</div>
编辑：
刚刚看到您需要的屏幕。
#a {
background-color:#FFC;
padding:10px;
float: left; /* added this */
width: 65%; /* added this too, either give width in % or in pixels */
}
将overflow: hidden;应用于非浮动框。
请参阅此链接jsfiddle.net/EwC2Z/1 /
HTML
<body>
<h1>Title</h1>
<div>
<div>
<nav class="r-set">
<p><a href="#">Two</a></p>
</nav>
</div>
<div id="a">
<h3>One</h3>
</div>
</div>
</body>
Css
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/*resests end*/
body {
font-size:16px;
margin:5px;
}
h1 {
font-size:2em;
}
nav {
background-color:#ccc;
padding:5px;
width:200px;
height:200px;
margin:10px;
}
#a {
background-color:#FFC;
padding:10px;
float:left;
width:310px;
}
.r-set {
padding-left:10px;
float:right;
margin-top:-3px;
}