浏览器如何将相邻的div布局为浮动div
高威
我最近开始学习CSS，当我学习float时，遇到了一些问题。
从https://developer.mozilla.org/en-US/docs/Web/CSS/float：
float CSS属性指定元素应从常规流中提取并沿其容器的左侧或右侧放置，其中text和inline元素将在其周围包裹。
但是我只是想知道，如果div跟随浮动元素会怎样？所以我写了一个测试，它没有环绕它，而是与它重叠，而且我真的很困惑，因为有人告诉我浮动元素不会从常规文档流中获取，并且下一个div会向左对齐如果有足够的空间。
这是html和css，请注意，正确的div不是浮动的，如果它是浮动的，它将按照我的期望进行操作，但这不是我的问题。
<!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重叠，左div是一个浮动元素？我无法弄清浏览器如何处理的解释。如果浮动元素是从常规文档流中提取的，则可以解释这种行为，但这是事实。所以我对此一无所知。
TJ
无论您从文档中引用什么：
float CSS属性指定一个元素应从常规流中获取，并沿其容器的左侧或右侧放置，其中文本和行内元素将环绕该元素。
解释了这种行为。
输出是右div被左div重叠
<div>是一个块元素，因此不会环绕浮动元素。浮动div从正常流中移除，因此与重叠
div.right。如果增加的宽度，则可见
.right。
如果我用段落或h1替换右div，它将环绕左div，这是预期的行为。
不<p>，<h1>并且也像一样是块元素<div>，因此这不是预期的行为。预期的行为是它们的行为应与div完全相同.right。发生了什么事。
这里要注意的关键问题是，你可能并没有任何直接的文本里面.right，所以你觉得<div>是不是包装，而是<p>和<h1>有包装，因为你有文本里面他们是包装：
元素本身并没有环绕，（您只是认为是），因为其中的文本环绕了float元素，由于您已指定width:140px，因此没有足够的空间供文本right放在float的div旁边，因此它会中断下一行-这是预期的行为。
如果直接在.rightdiv内添加一些文本，也会发生同样的事情：它将环绕，但这并不意味着元素本身在环绕：
该<block元素被浮动股利和重叠只有文本和内联元素周围包裹，这是在文档中明确什么提到
如果您指定足够的宽度，它将在浮动div旁边对齐
我在这里看不到任何意外的东西。
旁注：“因为有人告诉我浮动元素不会从正常的文档流中提取”-我不相信会出现浏览器的人对文档的依赖
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将DIV放置在浏览器的中心
- 2
将div滚动到浏览器顶部时，如何将div设置为position：fixed？
- 3
如何在浏览器中将DIV调整为全屏
- 4
浮动div的CSS跨浏览器问题
- 5
（CSS）如何将Div放置在浏览器右下角附近，相对于浏览器大小？
- 6
如何强制IE在浏览器窗口中将两个div框彼此相邻放置？
- 7
如何使div彼此相邻，上下浮动
- 8
CSS：浏览器中的缩小将浮动的div移到其他div下方
- 9
浮动div留在div容器中/未在调整浏览器大小时包装
- 10
如何在div元素中获取浮动图像行以使用浏览器窗口调整大小
- 11
如何将main div扩展到整个浏览器窗口高度？
- 12
如何将相同的 CSS 属性应用于不同的浏览器（Chrome、IE）
- 13
使div为浏览器窗口的100％宽度
- 14
如何通过浏览器滚动自动为div设置动画
- 15
如何将Deault浏览器设置为NOT rekonq？
- 16
如何将相对布局设置为默认布局
- 17
在现代浏览器中垂直对齐浮动div（2014年）
- 18
如何在浏览器中央放置DIV
- 19
如何使固定的div覆盖浏览器的滚动条？
- 20
当浏览器宽度改变时，如何使DIV的宽度改变？
- 21
如何让div继承浏览器窗口的宽度和高度
- 22
如何强制浏览器遵循将要显示的div？
- 23
如何获得DIV忽略浏览器更改
- 24
如何使用浏览器大小单独调整div的大小？
- 25
调整浏览器的宽度大小后，如何将3个div放置在一列中？
- 26
CSS布局：即使浏览器窗口太小，div之间也没有换行
- 27
当内容溢出浏览器窗口时，用div替换html表布局
- 28
使用以下布局设置与浏览器兼容的div结构
- 29
css使主要内容div左右的布局cols占据浏览器窗口的整个高度
我来说两句