28. 浮动 {ignore}

[toc]

在讲解常规流（Normal Flow）时，介绍过：视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 应用场景

使用浮动布局的很多效果都可以利用css3中的弹性盒模型来实现，但是，相对而言，浮动的兼容性会更好一些。所以有很多公司，他们在布局的时候，有时候还是会选择使用浮动来实现。

修改float属性值为：

默认值为none

属性值为 auto

属性值为百分比

总结：

匿名行盒

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。 —— 文字环绕环绕效果

即：纯文本等价于常规流行盒。

行盒实际上可以看做是内容。

高度坍塌的根源：常规流盒子的自动高度（适应内容），在计算时，不会考虑浮动盒子。

因为，浮动盒子脱离常规流，所以，常规流盒子在计算高度时（适应内容），不会考虑浮动盒子。

解决办法：清除浮动；

涉及css属性：clear。

元素x 清除浮动并不是表示让 元素x 不浮动，而是让常规流的盒子在确认位置时，抬头看一下飘起来的浮动盒子 元素x 所在的位置，然后再排在这些浮动盒子的后面；

清除浮动三件套：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

通常将 clearfix 设置在发生高度坍塌的元素身上，也就是浮动元素的父级身上。

思考：为什么需要设置 display: block;？

因为：伪元素默认是行盒，而clear只有在块盒中才会生效。