CSS Float 边框重叠问题答案

【问题标题】：CSS Float border overlap issuesCSS Float 边框重叠问题
【发布时间】：2010-11-19 12:36:17
【问题描述】：

我正在尝试将一个菜单浮动到页面的左侧，当它变得足够大以到达下面的内容时，Firefox 会将内容完全按其应有的方式颠簸...除了边框。

这是一个包含一些项目的屏幕截图：

另一个有几个项目

“Box 4”按预期移动了，但它的边框仍然在左边。哎哟

HTML：

开 “-//W3C//DTD XHTML 1.0 严格//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 标题>

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

标题

框 1 标题

内容放在这里

方框2标题

内容放在这里

方框3标题

内容放在这里

方框4标题

内容放在这里
换行

正文>

标签： css firefox css-float border overlap

【解决方案1】：

我认为你无法单独使用 css 来做到这一点，因为你正在与正常流程作斗争。元素通常是堆叠在一起的，当你向下浏览页面时，试图让一个元素让开并不是这样的工作方式。

【讨论】：

【解决方案2】：

box4 的 css 中应该有一个 clear:both; 属性。它应该可以解决问题。我刚刚对其进行了测试，它可以满足您的需求。

#box4 {
    border: 1px #000 solid;
    width: 100%;
    clear:both;
}

【讨论】：

【解决方案3】：

你可以像这样更新你的#box4规则来解决这个问题：

#box4 {
   border: 1px #000 solid;
   margin-left: 100px;
}

编辑 #box4 在一个长的sidenav css下面：

#box4 {
   border: 1px #000 solid;
   clear: both;
}

【讨论】：

如果我这样做的话，那么当菜单中的项目很少时，box4的左侧就会出现一个无用的间隙。
您的另一个非 JavaScript 选项是将#box4 推到长边导航下方（编辑示例）如果您使用 Javascript，您可以在菜单太长时更改 box4 的样式，以便在它旁边顺利进行。

【解决方案4】：

在“box4” div 上方包含以下行。

<div style="clear:both;"></div>

因此您的代码应如下所示：

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4">
 <div class="title">Box 4 Title</div>
 <div class="content">Content goes here<br />line break</div>
</div>

干杯！！！

【讨论】：

这实际上将 box4 推到了菜单下方。所以我有三个顶框，它们下面有一个巨大的间隙，直到菜单的底部。

【解决方案5】：

您可以将 #box4 浮动到左侧..

但是它不会有 100% 的宽度..

正如你所理解的，这是无法修复的，因为 100% 的宽度总是会搞砸一些东西。你不能让它处于 100% 的宽度，但在推动时不会占用 100%...

【讨论】：

【解决方案6】：

您错过了 container 之外的 box4。你可以在下面查看sn-p。

#menu {
    float: left;
    width: 100px;
    padding-left: 0px;
}

#menu ul {
    margin: 0px;
    padding: 10px;
}

#title {
    margin-left: 100px;
    border: 1px #F00 dashed;
    height: 40px;
    font-size: 20pt;
}

#title_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#container {
    margin-left: 100px;
}

.topbox {
    width: 30%;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 2px;
    margin: none;
    border: 1px #F00 solid;
}

.topbox .title {
    text-align: center;
    border-bottom: 1px #000 solid;
    padding-top: 1px;
}

.content {
    padding: 2px;
}

#box4 {
    border: 1px #000 solid;
    width: 100%;
}

#box4 .title {
    display: block;
    border-right: none;
    border-bottom: 1px #000 solid;
    padding-left: 0px;
    padding-right: 0px;
    text-align:center;
    
}

#box4 .content {
    display: inline;
}

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">Title</span>
            </div>
            <div id="container">
                <div id="box1" class="topbox">
                    <div class="title">Box 1 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">Box 2 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">Box 3 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
            </div>
            
        </body>
    </html>

【讨论】：