1-2-4【CSS核心样式】CSS浮动

我现在所做的一切，都是为了明天可以更自由

---

文章内容输出来源：拉勾教育大前端就业集训营

1.浮动概述

• 概述：浮动是一种非常重要的布局属性，它可以让元素脱离标准流，同一级的浮动元素可以并排在一排显示。
• 属性：float浮动。
• 属性值：left左浮动，right右浮动。

2.浮动性质——脱离标准流

• 标准文档流特点:区分行块。
  • 块级元素:可以设置宽高，必须独占一行。
  • 行内元素:不能设置宽高，可以并排一行。
• 脱离标准流：浮动的元素脱离了标准流的限制，具备行块二象性。
  • 浮动的元素可以设置宽高，还可以并排一行；
  • 不会有空白折叠现象；
  • 如果元素不设置宽高，可以被元素内容自动撑开。

3.浮动性质——依次贴边

• 概述：浮动的元素在多行显示时与标准流不同，不会“严格意义上的换行”，而是在换行的基础上“哪里有空在哪显示”。
• 下面以左浮动为例，为大家举几个特殊案例

当父元素的宽度足够，浮动元素在同一行展示。

当父元素宽度不够，元素4会在贴边时跳过元素3，找到元素2，如果元素2后面位置足够，则会贴向元素2。

当元素2后面位置也不够时，会贴向元素1。

如果元素4在贴向元素2时，发现元素2的高度不高于元素3时，则会贴向元素1。

如果元素2的高度低于元素3，导致有一个凹槽，元素4的贴边不会“插空”，会在元素3高度基础上贴边元素1。

如果元素1后面的位置也放不下元素4，则会贴向父元素的左边。（超出父元素宽度则溢出）

• 右浮动和左浮动原理上是一致的，感兴趣的老铁自己动手试一试
• 左右浮动同时存在：

左右浮动同时存在时，与单一浮动贴边展示规则类似：浮动元素摆放时，有足够的位置则摆放在空缺处，位置不够则换行。

• 利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如:
  • 平均分布的表格效果；
  • 导航栏效果；
  • 常见的电商或企业网站布局。

4.浮动性质——没有margin塌陷

• 没有margin塌陷：margin塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有margin塌陷现象。

说明：标准流中小的margin会塌陷至大的margin中，导致实际显示效果只有大的margin值生效。在浮动中，不存在该现象。

5.浮动性质——让出标准流位置

• 概述：元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。

说明：粉色的盒子左浮动，蓝色的盒子不浮动，但是粉色的盒子却与蓝色的盒子存在重叠，就是因为浮动元素不会占有标准流中的位置。

说明：两个盒子的位置互换，反之，浮动元素依然会根据标准流空白的位置进行展示。

拓展：

• 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作。
• 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。

6.浮动性质——字围现象

• 概述：同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，这些文字会让开浮动元素的位置，而不会被遮盖。

浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。

• 应用：百度百科中类似的排版效果。

7.浮动存在的问题

• 问题1：标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

说明：虽然是父子关系，但是粉盒子并没把父盒子的高度撑起来。

• 问题2：父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

说明：两组浮动元素分属两个div，但是实际展示上，第二个div中的浮动元素受到了第一个div浮动元素的影响，没有另起一行，反而进行了贴边显示。

以上问题需要被解决，解决的方法是“清除浮动带来的影响”

8.清除浮动一：height

• 说明：给标准流的父元素强制给一个合适的高度。父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。

说明：给父元素设定的高度大于浮动元素的实际高度，则不会出问题。

• 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

说明：子元素的高度超过父元素的高度时，问题出现了。除非浮动元素高度不会改变，否则不推荐使用。

9.清除浮动二：clear

• clear属性：清除标签元素自身受到前面的浮动元素的影响。
• 属性值：

属性值	作用
left	清除前面左浮动带来的影响
right	清除前面右浮动带来的影响
both	清除前面所有浮动带来的影响

• 使用：给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。

说明：你会发现第二个div盒子不会再被浮动元素覆盖了。

• 问题：父元素不能高度自适应，且两个父元素之间如果有margin效果不正确。

clear属性在其他方面用处更大，不用纠结这个遗留的问题，后面会讲~

10.清除浮动三：隔墙法

• 外墙法：在两个大的父盒子之间，添加一个空的
  标签，标签上带有clear: both属性。

说明：虽然下一个盒子的显示不再受影响了，但是父盒子高度没有自适应。

• 内墙法：在父元素内部，所有的浮动子元素后面，添加一个空的div元素，标签高度为0，添加clear: both属性。

说明：因为那个空div元素是标准流，所以父盒子的高度可以自适应了；又因为空div元素不受浮动影响，所以位置出现在浮动元素下方，所以父盒子的高度包含了浮动元素的高度。

• 内墙法缺点：虽然内墙法可以解决所有问题，但如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构的冗余。

11.清除浮动四：伪类

• 说明：本质是使用伪类方法利用css代码书写一堵内墙。
• 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
• :after，这个伪类表示选中的是某个标签内部的最后的位置。
• 书写方法：前面必须加普通的选择器，后面连续书写伪类名称。将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

说明：伪类选择器中的意思是，在.clearfix类标签的最后面，增加一个内容为“1”的文字，转换为块级元素，高度设置为0，不受到浮动元素影响，内容隐藏。

伪类选择器后面会讲，大家目前了解一下即可~

12.清除浮动五：溢出隐藏法

• 说明：给内部有浮动子元素的父元素添加溢出隐藏overflow: hidden; 属性，可以解决浮动的所有问题。

说明：高度自适应原因是，一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。

13.小总结

• 如果父元素高度是固定的，建议使用 height 属性解决。
• 如果父元素高度需要自适应，建议使用overflow属性解决浮动问题。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，诸君共勉！