个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
最近开始学习css，在学习float的时候遇到了一些问题。
来自 https://developer.mozilla.org/en-US/docs/Web/CSS/float :
The float CSS property specifies that an element should be taken from the normal flow and >placed along the left or right side of its container, where text and inline elements will >wrap around it.
但我只是想知道，如果一个div跟在 float 元素之后呢？所以我写了一个测试，它没有环绕它，它与它重叠，我真的很困惑，因为有人告诉我 float 元素不会从正常的文档流中获取，下一个 div 将与它左对齐如果有足够的空间。
这是 html 和 css，注意右边的 div 不是 float 的，如果它是 float 的，它会表现出我的预期，但这不是我的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Layout</title>
<style type="text/css">
#wrap {
background: #00c;
margin: 0 auto;
width: 960px
}
#header {
background: #FF3300;
width: 100%;
}
#mainbody {
background: #0CF;
width: 100%;
overflow: hidden;
}
#footer {
background: #639;
width: 100%;
}
.left {
width: 140px;
height: 200px;
background: #1f0;
float: left;
}
.right {
width: 140px;
height: 500px;
background: green;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="mainbody">
<div class="left"><h1>Left</h1></div>
<div class="right"><h1>Right</h1></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
我没有足够的声誉来发布图片。输出是右边的div被左边的div重叠，如果我用段落或h1替换右边的div，它会环绕左边div 这是预期的行为。
我只是想知道为什么右边的div被左边的div重叠，这是一个 float 元素？我无法弄清楚浏览器如何处理这个的解释。如果 float 元素取自正常的文档流，它可以解释这种行为，但这是事实。所以我对此一无所知。
最佳答案
无论您从文档中引用了什么:
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
解释这种行为。
The output is that the right div is overlapped by left div
<div>是一个 block 元素，所以它不会环绕 float 元素。 float 的 div 从 normalflow 中取出，因此与 div.right .
如果增加 .right 的宽度，这是可见的.
if I replace the right div with a paragraph or h1, it will wrap around the left div which is the expected behaviour.
没有。 <p>和 <h1>也是 block 元素，就像 <div> ，因此这不是预期的行为。预期的行为是它们的行为应与 div .right 完全相同。 .这正在发生。
这里要注意的关键是，您可能没有直接在 .right 中使用任何文本。 , 所以你认为 <div>不是包装，而是 <p>和 <h1>正在换行，因为您在其中包含换行的文字:
元素本身没有环绕，(你只是认为它是)只有它们里面的文本环绕 float 元素，因为你指定了 width:140px , 文本空间不足 right坐在 float 的 div 旁边，以便它分解到下一行 - 这是预期的行为。
如果你直接在 .right 中添加一些文本，也会发生同样的事情。 div:它会环绕，但这并不意味着元素本身正在环绕:
<block元素被 float 的 div 重叠，只有文本和内联元素环绕它，这是文档中明确提到的
如果你指定足够的宽度，它会在 float 的 div 旁边对齐
我在这里没有看到任何出乎意料的事情。
旁注:“因为有人告诉我 float 元素不会从正常的文档流中获取”——我不相信有人会看浏览器开发人员的文档
关于css - 浏览器如何将相邻的div布局到 float 的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25468179/
24
4
0
我想在数组中找到连接(相邻)的元素。 例如，在数组中: [1,2,3,4,5] 要访问所有 2 个连通元素，输出将为: 1,2 2,3 3,4 4,5 要访问所有 3 个连通元素，输出将为 1,2,3
我有三个 Sprite ，彼此堆叠在一起。 我修改了他们的 transform.matrix 以给出他们一致增长的外观。 但是，根据比例因子，瓷砖之间有时会出现小裂缝。 cracks between
我正在阅读有关 Margin Collapsing 的文章，我遇到了这个:margin Adjacent siblings The margins of adjacent siblings are c
float div 的框阴影被其右侧的邻居截断，但左侧未截断。 我玩过 z-index 和 overflow: visible，但没有用。 HTML: CSS: .doc-page {
我有多个元素说卡片。这些卡片需要水平堆叠并且高度需要相同。这正在发生在我身上。 每张卡片都有图像、文本和按钮。每张卡片的图像和文本应采用任何卡片中的最大高度，以便它们正确对齐。这不会发生在我身上。 如
我有这个 GUI 我使用了 GridBagLayout，但我不知道为什么 Plain Bread 复选框与其相应的标签之间有很大的间距。 而且，我尝试仅增加按钮沿 x 轴的间距，但尽管重置了插图，但沿
在过去，我已经为自定义元素符号使用了数百次列表项背景图像，但不知何故从未遇到过这个问题。 基本上，我有一个 IMG float 在无序列表的左侧。元素符号背景图像设置在每个 LI 的左上角。但是， f
我正在使用 Bootstrap 框架并使用 2 列网格。 html 内容有标题、链接、副标题和文本。这增加了该列的高度。我希望它旁边的列与其高度匹配(以便图像显示)没有设置高度图像不显
我有一个 php 代码可以生成数百个 和 标签。我的问题如下，我有以下内容: X X 我想要第二个的边框颜色更重要，以便共享边框显示为灰色而不是黑色。我可以在第二个 td 中使用重要性或继承标签吗？
Place holder for Radio1 Place holder for Radio2 在此，我只想要 与相应的单选按钮相关联是可见的，但是...... * { visibilit
我正在尝试在 html 中实现以下布局。更大的 div 1。然后是它旁边的另一个 div，顶部有一个边距。如果我给 float: left 给第一个 div，给第二个 div margin-top 也
假设我有 2 个名为 IN 和 MASK 的二进制输入。实际字段大小可能是 32 到 256 位，具体取决于用于完成任务的指令集。两个输入都会改变每次调用。 Inputs: IN = ...110
我想知道是否有一种简洁/一行的方法来执行以下操作: pack :: [a] -> [(a, a)] pack [] = [] pack [_] = [] pack (x:y:xs
下面的代码分为两部分，一部分处理头部的管理，另一部分处理“主体”，当我执行代码时引发下面的异常，我该如何解决该错误？我不知道下面的错误是什么原因造成的，错误是在react的解析上 错误: Line
http://imgur.com/a/DA5i4 在上面的两张图片中你可以看到我有一个主容器，里面装满了 3 个较小的 div，一个大的在中间，两个瘦的在两边，但是右边直到中间的 div 下面才开始。
正如我在标题中解释的所有内容，然后我将只为你们提供我现在拥有的代码，我一直在努力实现我想要的东西很长时间但没有运气......它表现得像响应式的，但即使调整大小我也想将其保持在原位...截图
我编写了一个 jquery 插件，它使用 Flot 将 HTML 表格转换为图表。 HTML 是从 XSLT 生成的，在 XSLT 中我有以下代码来调用我的插件。此代码尝试在 blah1 和 blah
我正在尝试实现这样的布局。 aaa xxxxxx oooo aaa xxxxxx oooo xxxxxx xxxxxx bbb xxxxxx cccc bbb xxxxxx cc
在包含网格的 2 个 div 上使用内联 css 显示不起作用 最佳答案 为您的 div 指定宽度并根据您的要求使用“float: left”或“right”。不要对 div 使用“内联” 例如 CS
我将 MVC 项目中的一些代码返回到网页。我无法用撇号解决问题，当我的电话看起来像这样时，我如何忽略它 document.getElementById('some').insertAdjacentHT
我是一名优秀的程序员,十分优秀！