CSS浮动和重叠框
我一直在搞乱CSS,试图了解浮动等等.这是问题的样子:
正如你所看到的,黄色的盒子漂浮在灰色的后面并经过它.如何让它在方框二之前停止？这是我的代码:
<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;
}
请注意，宽度也已指定。这是因为您想将两个盒子放入包装器中并指定其宽度：
超文本标记语言
<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 可扩展，您应该使用相同的 CSS 和标记。只需去掉 Box One 的浮动和宽度属性，并为其赋予 225px 的右边距（Box Two 的宽度减去右边距）即可。这是更新后的jsFiddle。