CSS浮动和重叠框答案

【问题标题】：CSS floats & Overlapping boxesCSS浮动和重叠框
【发布时间】：2013-02-06 04:33:24
【问题描述】：

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

【问题讨论】：

你能创建一个jsfiddle
如果可能的话，创建您想要的图像，以便我们更好地理解
这是我的 jsfiddle：jsfiddle.net/8pX9s（没听说过，希望你能看到）
Why does CSS float not change the width of the following div?的可能重复

标签： css css-float

【解决方案1】：

当您浮动一个元素时，您会将其从 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 完全齐平，请去掉它的左边距。

编辑：

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

【讨论】：

很高兴知道它们漂浮在 DOM 之外。但理想情况下，我希望我的灰色框始终为 200 像素，而不是精确值，而黄色框填充其余空间 - 无论屏幕有多大。 ..
问：如果浮动元素将其带出 DOM，为什么
会“看到”
，就好像 nav 在 DOM 中一样？ jsfiddle.net/9UJcZ
好问题！答案最好在这里解释Why do <fieldset>s clear floats?

【解决方案2】：

将overflow: hidden;应用于非浮动框。

【讨论】：

【解决方案3】：

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

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

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

JS fiddle 表现得更好：here

【讨论】：

看起来不错！为什么你的百分比不等于 100？ 36+58 = 94% ... 好的，每边都有填充：94 + 4... 仍然是 98%？
这回答了我的一个棘手问题（一个 CSS-newb）.. 试图在容器框中创建一个有效的垂直断线.. 谢谢..

【解决方案4】：

查看此链接 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;
}

【讨论】：

关闭，但不完全（参见图片 dl.dropbox.com/u/16876271/2.png）

【解决方案5】：

使用 float 时，在浮动元素的末尾添加 this。（在浮动元素内m>）。

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

clear 的 CSS 定义如下。

.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 */
}

【讨论】：