logo标签列表

CSS浮动和重叠框

csscss-float
9

我一直在研究CSS，尝试理解浮动等。 这是问题的样子：

CSS float overlapping

如您所见，黄色框会漂浮在灰色框后面并超出它。 我该如何让它停在“box Two”的前面？ 这是我的代码：

<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吗？ - Hary
如果可能，请创建您想要的图像，以便我们更好地理解。 - Chandrakant
这是我的 jsfiddle：http://jsfiddle.net/8pX9s/（没听说过，希望你能看到它） - tuco
可能是重复的问题：为什么CSS浮动不改变下一个div的宽度？ - Hashem Qolami
在最左侧（非浮动）元素上使用 overflow-x: hidden，一切都会自动对齐。 - TheDudeAbides
5个回答
3

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

最直接的方法。这是我使用的解决方案。 - TheDudeAbides
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中。这将避免像您在Box One后面渲染Box 2时遇到的问题。
这里是一个将所有内容汇总起来的jsFiddle。顺便说一下，如果您想要Box Two完全贴合Box One，请去掉其左边距。

编辑：

要使Box Two静态且Box One可扩展，您应该使用相同的CSS和标记。只需取消Box One的浮动和宽度属性，并给它一个右边距为225像素（Box Two减去右边距的宽度）。这是更新后的jsFiddle链接。

很高兴知道它们可以浮出DOM。但理想情况下，我希望我的灰色框始终为200px，黄色框填充其余空间 - 无论屏幕有多大，而不是精确的值。 - tuco
如果浮动元素会将其从DOM中移出，为什么<fieldset>会将<nav>视为在DOM中呢？http://jsfiddle.net/9UJcZ/ - tuco
很好的问题！最好的解释在这里为什么<fieldset>会清除浮动？。 - symlink
0

你需要在盒子上设置宽度，确切地说，你需要将填充改为百分比：

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

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

JS Fiddle更好地展示了它：这里

看起来没问题！ 为什么你的百分比不等于100？ 36+58 = 94% ... 在每个方向都填充4以后：94 + 4... 还是98%吗？ - tuco
这为我解决了一个棘手的问题（对于一个CSS新手来说）...尝试在容器框中创建一个高效的垂直分割线..谢谢你.. - drew..
-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;
}
接近了，但不完全正确（请参见图像dl.dropbox.com/u/16876271/2.png） - tuco
-1

当使用浮动时，在浮动元素的末尾添加以下内容。（在浮动元素内部）。

<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 */
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接