关于float的一些细节问题,望各位前辈不吝赐教! 小子先行谢过-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

关于float的一些细节问题,望各位前辈不吝赐教! 小子先行谢过

杨冬芳 2016-06-03 14:40:15 1187

今天遇到了一个问题,对于 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不是已经脱离流了吗?

前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:26:37

    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轴的渲染顺序也得明白,建议你多看多写写实验一下。
    有疑意欢迎提出。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程