Question

我遇到浮动问题，并在下面提供了示例代码。我正在尝试创建一个两列布局：我知道如何通过许多其他方式执行此操作，因此这个问题是为了找出FLOAT行为方式的原因。

容器DIV有两个DIV，两个都向左浮动。
正如预期的那样，浏览器窗口的大小决定了第二个浮动块级别元素是否会在第一个浮动元素旁边或下面。
问题出现在第二个浮动DIV中的内容长度（假设浏览器窗口最大化，无论分辨率如何）。

在下面的代码中，我已经注释掉了第二段的部分内容。在我的浏览器上，这是切断标记：包括此后的任何内容导致整个DIV清除第一个DIV，即使第二个DIV中还有大量空间需要清除第一个DIV之前。

我在代码中看不到会导致这种情况发生的任何事情。我知道浮点数在块级别和内联内容方面的行为以及将非浮动块放置在浮动块旁边的后果，但我在文档中找不到任何内容来解释为什么在看起来有足够的空间时块应该清除因为它的内容。

非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Float Problem</title>

<style>

body {
background:#5c604e;
}

#container {
position:relative;
background:yellow;
}

p {
background-color:#cccccc;
    width:50%;
}

.block {
width: 200px;
height: 200px;
}

.float {
 float: left;
}

.pink {
 background: #ee3e64;
}

.blue {
 background: #44accf;
}

</style>
</head>
<body>  
<div id="container">
<div class="block pink float">Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut. 
</div>   
<div class="blue float"> <h2>Test Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, <!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. <!--    Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. -->   
    </p>
</div>
</div><!--end of container div --> 
</body>
</html>

在http://cssdesk.com/86cPH

上查看

Answer 1

在您的示例中，您有两个块级元素在彼此旁边浮动。因为它们是块级的，所以它们建立了一个新的包含上下文，其中的内容将存在并影响布局。

计算浮动元素的框大小时的标准行为是基于元素的内容。因为你的第二个浮动框没有明确的宽度，浏览器会确定它的宽度应该基于它的内容，在浮动元素的情况下，它的内容可能是可行的。

因此，第二个框在第一个框下面流动，因为段落的固有宽度影响蓝色框，这大于其容器的分配显式约束（即，#container的宽度减去第一个浮动的宽度）元素）。

如果您希望文本在浮动元素周围流动，则应省略“蓝色”框。只有当float和内容嵌套在同一个容器中（并且内容不是块级元素）时，内容才会像粉红色的盒子那样流动。

至于获得具有相等高度列的工作两列布局，如果您不需要支持IE7，我建议您尝试display: table。

Answer 2

你想要达到什么目标？你还没有固定第二个块的宽度，因此它的宽度会因内容长度而变得很疯狂。

给它一个固定的宽度。如果你想要覆盖它的休息宽度，那就试试吧。

.block1 {
    width:20%;
}


.block2 {
    width:80%;
}

和html

<div class="block1 pink float"> ..content.. </div><
div class="block2 blue float"> ..whatever content.. </div>

记住左边块的关闭div和右边块的div之间应该没有空格，否则它们之间的空格将导致它们堆叠在一起

CSS Float行为（即使在检查W3C之后）

2 个答案: