一、什么是浮动

浮动可有三种取值，float:left/right/none，默认为none

浮：漂浮起来脱离文档流，动：朝着指定方向移动

元素加了浮动后，会脱离文档流，提升了半层层级，向着指定方向移动，直到遇到父元素的边界或另一个浮动元素停止

Q1：什么是层级？

A1：如果将整个元素看做一层，则下半层是元素本身（背景样式等），上半层是元素中的内容

举例：

三个盒子都没有浮动时

 

 当给box2添加float:left时，三个盒子的排列变成

此时由于box2浮动脱离了文档流，box3上移，被box2遮挡了。

但此时box3盒子里的文字box3并没有上移！！！

原因：上文中有说到，浮动其实是提升了半层层级，那么此时box2的层级可以遮挡box3的小半层（背景样式等），但此时box2的层级其实和box3的上半层（元素中的内容）在同一层级，因此，文字box3不会上移。  

当增加box4,给box2和box4都添加float:left时

 

 

Q2：为什么box4没有排在box2后面，而是排在了非浮动元素box3的底部之后？

A2：浮动元素之间是漂浮着，并不会形成一个流。浮动元素总是要保证自己的顶部与上一个标准流中的元素（未浮动元素）的底部对齐。

 

Q3：行类元素（span等）在浮动后为什么可以给宽高？

A3：position：absolute和float会隐式地改变display类型，除display:none外，只要设置了position：absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽

 

二、清除浮动

2.1.浮动的缺陷

1.影响兄弟元素的位置

2.使父元素产生高度塌陷

当没有浮动时，父盒子会被撑开高度，如下图

当给box1和box2设置左浮动时，父盒子高度会变成0，box3的背景色会上来

当父元素不给高度的时候，内部元素不浮动时会撑开。但浮动的时候，父元素变成一条线

2.2.CSS中清除浮动的属性：clear

2.3.清除浮动的方法及优缺点

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

2.3.1 在最后一个浮动标签后，新加一个标签，给其设置clear: both（不推荐）

这样清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

• 优点： 通俗易懂，方便
• 缺点：添加无意义标签，语义化差

2.3.2 触发bfc——父元素添加overflow:hidden（不推荐）

• 优点：代码简洁
• 缺点：内容增多时无法显示被溢出的元素

2.3.3 使用after伪元素清除浮动（推荐使用）

• 优点：符合闭合浮动思想，结构语义化正确
• 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

2.4.清除浮动的实质

上述清除浮动方法可以分为两种

1.利用css的clear属性，加clear:both

2.触发浮动元素父元素的BFC，使该父元素可以包含浮动元素

注：本人曾在2019年博客园发过此文，缺少2.3节，此文补充后重新发布 www.cnblogs.com/Danyqueen/p…