个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
48
4
我对 float 有疑问，并在下面提供了示例代码。我正在尝试创建一个两列布局:我知道如何通过多种其他方式做到这一点，所以这个问题是为了找出为什么 FLOAT 的行为方式与此处相同。
在下面的代码中，我注释掉了第二段的一部分。在我的浏览器上，这是截止标记:在此之后包含任何内容都会导致整个 DIV 清除第一个 DIV，即使第二个 DIV 中还有很多空间需要清除第一个 DIV。
我在代码中看不到任何会导致这种情况发生的内容。我知道 float 在 block 级别和内联内容方面的行为方式以及将非 float block 放在 float block 旁边的后果，但我在文档中找不到任何内容来解释为什么当似乎有足够的空间时应该清除 block 其内容。
非常感谢帮助。
<!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>
最佳答案
在您的示例中，您有两个 block 级元素彼此相邻 float 。因为它们是 block 级的，所以它们建立了一个新的包含上下文，它们的内容将在其中存在并影响布局。
计算 float 元素的框大小时的标准行为是基于元素的内容。因为你的第二个 float 框没有明确的宽度，浏览器决定它的宽度应该基于它的内容，在 float 元素的情况下，它的宽度将和它的内容一样宽。
因此，第二个框在第一个框下方流动，因为段落的固有宽度会影响蓝色框，蓝色框大于为其容器分配的显式约束(即，#container 的宽度减去第一个 float 的宽度元素)。
如果您希望文本围绕 float 元素流动，您应该省略“蓝色”框。只有当 float 和内容嵌套在同一个容器中(并且内容不是 block 级元素)时，内容才会像人们预期的那样围绕粉红色框流动。
如果您不需要支持 IE7，就获得具有等高列的有效两列布局而言，我建议您尝试 display: table。
关于html - CSS Float 行为(即使在检查 W3C 之后)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7292984/
48
4
0
我知道问题的标题听起来很奇怪，但我不知道该怎么调用它。 首先，我有一个网格布局，我希望我的 .search-wrapper 宽度为 50% 并向右浮动。在我的演示中 jsfiddle整个 .searc
我们正在使用 QA-C 来实现 MISRA C++ 一致性，但是该工具会为这样的代码喷出错误: float a = foo(); float b = bar(); float c = a - b; 据
考虑 float a[] = { 0.1, 0.2, 0.3}; 我很困惑a稍后传递给函数 foo(float* A) .不应该是 float* 类型的变量指向单个浮点数，对吗？就像这里提到的tu
这可能是我一段时间以来收到的最好的错误消息，我很好奇出了什么问题。 原代码 float currElbowAngle = LeftArm ? Elbow.transform.localRotation
刚开始学习 F#，我正在尝试为 e 生成和评估泰勒级数的前 10 项。我最初编写了这段代码来计算它: let fact n = function | 0 -> 1 | _ -> [1
我已经使用 Erlang 读取二进制文件中的 4 个字节(小端)。 在尝试将二进制转换为浮点时，我一直遇到以下错误: ** exception error: bad argument in
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
我每次都想在浏览器顶部修复这个框。但是右边有一些问题我不知道如何解决所以我寻求帮助。 #StickyBar #RightSideOfStickyBar { float : right ; }
我正在研究 C# 编译器并试图理解数学运算规则。 我发现在两种不同的原始类型之间使用 == 运算符时会出现难以理解的行为。 int a = 1; float b = 1.0f; Cons
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
Denormals众所周知，与正常情况相比，表现严重不佳，大约是 100 倍。这经常导致 unexpected软件 problems . 我很好奇，从 CPU 架构的角度来看，为什么非规范化必须是 那
我有一个由两个 float 组成的区间，并且需要生成 20 个随机数，看起来介于两个 float 定义的区间之间。 比方说: float a = 12.49953f float b = 39.1123
我正在构建如下矩阵: QMatrix4x3 floatPos4x3 = QMatrix4x3( floatPos0.at(0), floatPos1.at(0), floatPos2.at(0),
给定归一化的浮点数f，在f之前/之后的下一个归一化浮点数是多少。 通过微动，提取尾数和指数，我得到了: next_normalized(double&){ if mantissa is n
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素？ 为了帮助可视化我的问题，我创建了以下 jsFiddle http://
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素？ 为了帮助可视化我的问题，我创建了以下 jsFiddle http://
我有一个新闻源/聊天框。每个条目包含两个跨度:#user 和#message。我希望#user 向左浮动，而#message 向左浮动。如果#message 导致行超过容器宽度，#message 应该
我想创建一个“记分卡”网格来输出一些数据。如果每个 div.item 中的数据都具有相同的高度，那么在每个 div.item 上留下一个简单的 float 会提供一个漂亮的均匀布局，它可以根据浏览器大
我正在学习使用 CSS float 属性。我想了解此属性的特定效果。 考虑以下简单的 HTML 元素: div1 div2 This is a paragraph 以及以下 CSS 规则: div {
我正在尝试从可以是 int 或 float 的文件中提取数据。我发现这个正则表达式将从文件 (\d+(\.\d+)?) 中提取这两种类型，但我遇到的问题是它将 float 拆分为两个。 >>> imp
我是一名优秀的程序员,十分优秀！