9

我一直在搞乱 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>
4

5 回答 5

2

当您浮动一个元素时，您会将其从 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 后面渲染框 1 时遇到的问题。

这是一个将所有内容组合在一起的jsFiddle 。顺便说一句，如果您希望框二与框一完全齐平，请去掉它的左边距。

编辑：

要使框 2 静态且框 1 可扩展，您应该使用相同的 CSS 和标记。只需去掉 Box One 的 float 和 width 属性，并给它 225px 的右边距（Box Two 的宽度减去右边距）。这是更新的jsFiddle。

于 2013-02-06T04:54:26.363 回答
1

适用overflow: hidden;于非浮箱。

于 2020-01-05T16:53:26.017 回答
0

您需要在盒子上设置宽度，确切地说，您需要将填充更改为 %：

#a {
    background-color:#FFC;
    padding:1%;
    width:58%;
}

.r-set {
    padding-left:1%;
    float:right;
    width:39%;
}

JS fiddle 显示得更好：这里

于 2013-02-06T04:44:29.593 回答
-1

使用浮动时，将其添加到浮动元素的末尾。（在浮动元素内）。

<div class="clear"> </div>

CSS定义clear如下。

.clear {
clear: both;
}

或者，如果您不使用clear，则必须明确指定宽度 x 高度。

<div class="clear"> </div> 在浮动元素之后使用，防止后面的 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 */
}
于 2013-02-06T06:08:04.117 回答
-1

看到这个链接 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;
}
于 2013-02-06T04:41:40.053 回答