Float

通过 float 可以使元素向 父元素 的左侧或者右侧移动：

• none ：默认值，不浮动；
• left ：向左浮动；
• right ：向右浮动；

使用 float 需要注意以下事项：

• 元素设置浮动以后，水平布局的等式便不需要强制成立；
• 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动；

浮动特点

1. 浮动元素会完全脱离文档流，不再占据文档流中的位置 ；
2. 设置浮动以后，元素会向父元素的左侧或右侧移动；
3. 浮动元素默认不会从父元素中移出；
4. 按照先来后到的顺序，浮动元素向左或向右移动时，不会超过前边的浮动元素；
5. 浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高；
6. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移；
7. 利用浮动来设置文字环绕图片的效果：浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围；

🌰 例子：

总结：

• 主要作用就是让页面中的元素可以水平排列，通过浮动进行水平方向的布局；
• 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化；

脱离文档流后的特点

对于块元素：

• 块元素不再独占页面的一行；
• 脱离文档流以后，块元素的宽度和高度默认都被内容撑开；

对于行内元素：脱离文档流之后，会拥有块元素的特点，很像 inline-block ；

高度塌陷

浮动布局中，父元素的高度默认由子元素撑起。当子元素浮动后脱离文档流后，无法撑起父元素的高度会导致父元素的高度丢失，导致布局混乱。

🌰 例子：

解决方法：

• 通过开启 BFC；
• 通过清除浮动；
• 通过伪元素选择器 ::after ；

BFC

BFC Block Formatting Context 块级格式化环境：

• 是一个 CSS 中的一个隐含的属性，可以为一个元素开启 BFC；
• 开启后，元素会变成一个独立的布局区域；

元素开启 BFC 后的特点：

• 不会被浮动元素覆盖；
• 父子元素外边距不会重叠；
• 可以包含浮动的元素；

开启 BFC 的方法：

• 设置父元素为浮动：
• 设置父元素为行内块元素；
• 设置 overflow 为非 visible 值：既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙；
  • hidden （或 auto ） 开启其 BFC， 以使其可以包含浮动元素；
  • scroll 会有滚动条；
• 更多：块格式化上下文 - Web 开发者指南 | MDN (mozilla.org) (opens new window)

🌰 例子 / 开启 BFC 消除高度塌陷：

清除浮动

通过 clear 属性来清除浮动元素对当前元素所产生的影响（当某个元素因为其他元素浮动的影响而改变位置）：

• left 清除左侧浮动元素对当前元素的影响；
• right 清除右侧浮动元素对当前元素的影响；
• both 清除两侧中影响较大一侧元素的影响（注意，这里不是同时清除两侧的影响）；

🌰 例子 / 清除浮动 + 通过清除浮动消除高度塌陷：

通过伪元素选择器 ::after 消除高度塌陷：

• 与 float-example-7 直接在 box2 后面添加 box3 不同（结构添加），使用伪元素选择器（属于表现）；
• 高度塌陷属于表现问题，使用伪元素选择器更符合网页的编程思想；
• 由于 ::after 伪元素是行内元素，转换为块元素才能撑起元素的高度；

clearfix

参照上面的例子，同样使用伪元素选择器消除前面 盒子模型 中出现的 垂直布局边距重叠的问题。

详细思路参考：10 - 高度塌陷与 BFC・语雀 (yuque.com) (opens new window)

总结:

• 高度塌陷问题，一般用 ::after ;
• 外边距重叠问题，一般用 ::before ；

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题：

🌰 例子：