css 关于浮动float的使用以及清除浮动

逃跑的火焰

float：none | left | right

默认值：none

适用于：所有元素         

none：设置对象不浮动left：设置对象浮在左边right：设置对象浮在右边

• 当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即[url=]display[/url]属性等于block。也就是说，浮动对象的display特性将被忽略。
• float在绝对定位和[url=]display[/url]为none时不会被应用。
• 什么时候用浮动？--让元素变成一行，水平布局时、需要文本环绕效果时
• 浮动的特点，半脱离文档流，且会对后面的元素产生影响。
  1、父级没有设置高度的时候，会出现塌陷
  2、父级的宽度不够，会换行排列
  3、改变元素类型 变成行内块
• 清除浮动float的三种方法
  

• 对后面的元素进行操作。
  

给后面元素添加，clear：both;

1.1额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2触发BFC效果。

通过触发BFC方式，实现清除浮动

父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3对父元素进行操作.

3.1父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

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

3.3使用before和after双伪元素清除浮动