关于float的一些细节问题，望各位前辈不吝赐教！ 小子先行谢过
今天遇到了一个问题，对于 float的使用 有些困惑，顾写了下面一个小程序，望各位前辈不吝赐教！
<!DOCTYPE html>
<html>
<head>
<title>css浮动</title>
<meta charset="utf-8">
<style type="text/css">
d1{width: 300px;height: 300px;background: red;}
d2{width: 200px;height: 200px;background: green;}
d3{width: 200px;height: 200px;background: yellow;}
</style>
</head>
<body>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</body>
</html>
对于float的问题(下面各div块直接用其id指代)：
Q1：给d1设置float:right属性。此时d1不是已经脱离了文档流了吗？为什么用绝对定位trbl无法控制而还是必须用相对定位margin-trbl才能控制？
Q2：给d1设置float:left属性。此时，d1确实覆盖了d2和d3的一部分，不过d2和d3中的内容2和3为何跑到d1的左下角去了？
Q3：给d1设置float:left属性后，为清除d1覆盖d2的效果，在d2中设置clear:left。此时为何只有设置clear:left和clear:both才能清除浮动效果？其他的类似clear:bottom之类的为什么不行？我在网上看到的是「clear属性规定了该元素的哪一侧不允许出现浮动元素」为何是left？是因为d1在文档流前面吗？不过d1不是已经脱离流了吗？
写回答
-
IT从业Q1:浮动和定位本就属于CSS两大“定位”技术，浮动之后用绝对定位是什么鬼？一般来说浮动和定位是搭配使用的。举个例子，float可以用来布局，类似2列布局3列布局之类的，而定位则多用来实现布局内部视图模块的多样性，比如轮播图底部的轮播控制按钮。
Q2:《CSS权威指南》浮动章节有详细记载。浮动元素的确脱离正常文档流，这里且不说BFC，像你这种浮动方式的确div1会在div2上面，但对于文本框而言，它会避开浮动的元素，也就是你说的div2里面内容会挤到下面，而不是正常被正常左浮动的div1覆盖。这是浏览器对标准的执行，建议多看一些基础书，当然最好是W3C的草案。
Q3: clear属性木有bottom...在HTML中，每个元素都是一个相对独立的个体，这些元素按照语言习惯（一般是从左往右）排列，能放在一行的就不会换行，当一行实在放不下时默认会另起一行，所以一个浮动元素设置clear应该明确指明它的左边或右边不能有浮动元素（相当于有浮动元素的那一行已经满了，告诉浏览器从第二行开始渲染元素）所以clear的bottom值是没有必要存在的。存手打，个人意见，有错误欢迎指正。－－－－－－10/14 更新 －－－－－－－－
最近有了解一些关于z-index的知识，发现可以回答你q2的问题，z-index相当于在z轴对css视图的层次进行了描述。详情可以看这里
这里只贴出你这个问题的分析－浏览器的部分绘制顺序：
1 根元素的背景与边框
2 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠
3 浮动块元素
4 常规流中的后代行内元素
5 后代中的定位元素按照它们在 HTML 中出现的顺序堆叠所以浏览器先绘制浮动的div1，接着绘制常规流中的后代行内元素，也就是你这里面所说的div2/div3的内容（这个内容姑且认为是文本内容，也就是行内元素），对于div2/3的行内元素，因为已经被div1占据了位子，只能避开div1的内容进行内容的绘制（但是div2/3的背景是在div1绘制之前绘制的，所以和div1发生重叠，见顺序2和3）。
不知你有没有听懂我的意思，总之对于浏览器来说，除了对水平面的元素进行放置计算外，对于z轴的渲染顺序也得明白，建议你多看多写写实验一下。
有疑意欢迎提出。2019-07-17 19:26:37赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
