元素一旦浮动后:
-
脱离标准流
-
朝着向左或向右方向移动,直到自己的边界紧贴着包含块或者其他浮动元素的边界为止
包含块 一般指的就是父元素
Rule1:定位元素会层叠在浮动元素上面:
Rule2:浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容
- 利用此特性,可以轻松实现文字环绕功能:浮动-文字环绕练习
Rule3:行内级元素、inline-block 元素浮动后,其顶部将与所在行的顶部对齐
实现代码:float-rule_01-其他
Rule4:如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界
带圆圈的数字,标记着浮动元素浮动之前的位置
Rule5:浮动元素之间不能层叠
-
如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
-
如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止
Rule6:浮动元素的顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端
示例代码:float-rule_01、float-rule_02、float-rule_02-其他、float-rule_03
浮动常用的场景:
- 解决行内级元素、inline-block 元素的水平间隙问题
- 布局
由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
父元素计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题
解决父元素高度坍塌问题的过程,一般叫做 清浮动(清理浮动、清除浮动)
- 清浮动的目的:让父元素计算总高度的时候,把浮动子元素的高度算进去
代码:浮动的问题
给父元素设置固定高度
-
扩展性不好(不推荐)
-
代码:清浮动-01
让父元素浮动
-
可能导致页面中所有元素都浮动
-
父元素脱离了标准流
-
改变了元素的盒子特性(不推荐)
-
代码:清浮动-02
让父元素成为绝对定位元素(position 设置为 absolute 或 fixed)
-
父元素脱离了标准流
-
改变了元素的盒子特性(不推荐)
-
代码:清浮动-03
给父元素设置 display 为 inline-block、inline-table、table、table-cell、table-caption
-
改变了父元素的盒子特性(不推荐)
-
代码:清浮动-04
给父元素设置 overflow 为 visible 以外的值(比如 hidden、auto、scroll)
-
改变了父元素对内容溢出的默认行为(不推荐)
-
代码:清浮动-05
在父元素最后增加一个空的块级子元素,并且让它设置 clear: both
-
会增加很多无意义的空标签,维护麻烦
-
违反了结构与样式分离的原则(不推荐)
-
代码:清浮动-06
在父元素最后增加一个 br 标签:<br clear="all">
-
会增加很多无意义的空标签,维护麻烦
-
违反了结构与样式分离的原则(不推荐)
-
代码:清浮动-07
以上方法都不推荐,简单了解即可
给父元素增加 ::after
伪元素
- 纯 CSS 样式解决,结构与样式分离(推荐)
.clear-fix::after {
content: “”;
display: block;
clear: both;
height: 0; /* 兼容旧浏览器 */
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
前端校招精编面试解析大全点击这里免费获取完整版pdf查看
-1713636171673)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
[外链图片转存中…(img-oqqdi3wY-1713636171674)]
最后
前端校招精编面试解析大全点击这里免费获取完整版pdf查看