带圆圈的数字，标记着浮动元素浮动之前的位置

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; /* 兼容旧浏览器 */
visibility: hidden; /* 兼容旧浏览器 */
}
.clear-fix {
*zoom: 1; /* 兼容IE6~7浏览器 */
}


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

示例代码：清浮动-推荐解决方案

CSS 属性 - clear

面试结束复盘查漏补缺

每次面试都是检验自己知识与技术实力的一次机会，面试结束后建议大家及时总结复盘，查漏补缺，然后有针对性地进行学习，既能提高下一场面试的成功概率，还能增加自己的技术知识栈储备，可谓是一举两得。

以下最新总结的阿里P6资深Java必考题范围和答案，包含最全MySQL、Redis、Java并发编程等等面试题和答案，用于参考~

资料免费领取方式：点赞关注后，戳这里免费领取

重要的事说三遍，关注+关注+关注！

更多笔记分享