带圆圈的数字,标记着浮动元素浮动之前的位置
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
伪元素
示例代码:清浮动-推荐解决方案
每次面试都是检验自己知识与技术实力的一次机会,面试结束后建议大家及时总结复盘,查漏补缺,然后有针对性地进行学习,既能提高下一场面试的成功概率,还能增加自己的技术知识栈储备,可谓是一举两得。
以下最新总结的阿里P6资深Java必考题范围和答案,包含最全MySQL、Redis、Java并发编程等等面试题和答案,用于参考~
资料免费领取方式:点赞关注后,戳这里免费领取
重要的事说三遍,关注+关注+关注!
更多笔记分享