Question

我知道这对于浮动CSS布局是一种愚蠢的怀疑，但我无法在任何地方找到答案。我想要一个简单的页面，中间有一个大的红色反应角，内部有两个蓝色方块，一个在rectagle的每一边。我有以下HTML代码：

<body>
  <div id="rectangle">
    <div id="left"></div>
    <div id="right></div>
  </div>
</body>

然后我有这个css：

       #rectangle {
            width: 600px;
            margin: auto;
            padding: 50px;
            background-color: red;
        }
        #left {
            float: left;
            width: 250px;
            height: 250px;
            background-color: blue;
        }
        #right {
            float: right;
            width: 250px;
            height: 250px;
            background-color: blue;
        }

这不起作用，因为红色矩形不会调整其高度以覆盖蓝色方块，因为它们是浮动的我猜... 我知道解决这个问题的唯一方法是添加新的

<div id="footer"></div>

在矩形div的末尾，带有样式

clear: both;

我确信应该有更优雅的方式来做到这一点，不是吗？

Answer 1

只需将overflow: auto添加到#rectangle div。

示例：http://jsfiddle.net/ZVJQN/

Answer 2

添加明确的div

<div id="rectangle">
    <div id="right"></div>
    <div id="left"></div>
      <div class="clear"></div>
  </div>

.clear
{
    clear:both;
}

CSS中的浮点基础知识

2 个答案: