背景和 CSS 浮动答案

【问题标题】：Background and CSS Floats背景和 CSS 浮动
【发布时间】：2009-09-30 11:25:32
【问题描述】：

所以我在使用 960 网格系统时发现了一些他们不支持的东西。我考虑过切换到蓝图，但我必须在此过程中稍后再回到设计。无论如何，我已经简化了我的代码来展示我正在经历的事情：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

我正在尝试查看背景展开以覆盖所有 3 列。我可以做些什么来扩展背景以使其覆盖所有 3 列？

【问题讨论】：

标签： html css grid-layout

【解决方案1】：

只需将此额外规则添加到您的选择器：

div.frame {
     overflow:hidden;
}

除非有元素出现在框架之外，否则您不应该依赖 clearfix，也不应该依赖 clear:both 的任何无关标记。

【讨论】：

我有一个问题，这也适用于我的问题。如果我在容器内浮动元素，它会导致容器的背景显示在浮动元素下方。但这并没有隐藏任何溢出的内容，那么设置这个效果到底有什么影响呢？基本上我知道它有效，但我想了解为什么？

【解决方案2】：

你可以让框架像这样浮动：

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

就可以了。或者，您可以通过“明确修复”在框架中添加一个额外的元素。预制的 960 网格通过“clear”类为您执行此操作：

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

【讨论】：

【解决方案3】：

您需要将clearfix 类应用于#bkg。

<div class="frame clearfix" id="bkg">

【讨论】：

【解决方案4】：

您想要做的是“清除浮动”。有很多选择，有些简单，有些相当复杂。

最简单的，就是在最后一列之后添加一个清除div，像这样：

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

这应该工作。

这里有一些其他的方式（一些，纯 css）：

【讨论】：