CSS Float 边框重叠问题
Posted
技术标签:
【中文标题】CSS Float 边框重叠问题【英文标题】：CSS Float border overlap issues 【发布时间】：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标题 内容放在这里换行 正文> 【参考方案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" />
<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>【讨论】：
以上是关于CSS Float 边框重叠问题的主要内容，如果未能解决你的问题，请参考以下文章
html+css 表格 - tr 的边框底部与 td/th 的边框右侧重叠