1、css浮动
概述
网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。
1.1、浮动的概念
浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。
1.2、浮动属性
float
left 左浮动
right 右浮动
float:none 不浮动(默认值)
1.3、浮动的基本特性
可以使块元素在一行排列
脱离文档流
提升层级
【综合案例】京东首屏画块
1.4、浮动的问题（为什么要清浮动）
子元素浮动导致父元素高度塌陷
影响之后元素的布局
1.5、清浮动的方法
解决问题即清除动的方法
父元素固定高度法
描述：给浮动元素的父元素固定高度
缺点：不够灵活
代码演示
父元素overflow方法
描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现
缺点：可能会隐藏内容或触发不需要的滚动条
额外标签法
描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both
clear属性说明
作用：清除浮动
取值
left
both
right
提示通常使用both!
缺点：代码冗余，影响代码可读性
伪元素:after
描述：给浮动标签的父标签添加
.clearfix:after{
content:"";
display:block;
clear:both;}
优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用
作为通用代码总结
1.6、浮动特性总结
脱离文档流
提升层级
对块元素的影响
使块元素在一行排列
未定宽度的块元素适应内容
对行内元素的影响
生成了一个块级框即 （1）支持宽高 （2）支持垂直方向的margin,padding （3）支持行高、text-align等文本属性
脱离文档流不脱离文档流
1.7、浮动特性应用实例
1.7.1、 应用实例图文绕排
总结：浮动脱离文档流不脱离文本流
扩展了解： 最初只用于在成块的文本内浮动图像，现在它已成为在网页上创建多列布局的最常用工具之一
代码演示
1.7.2、两列自适应
实现要点：单列定宽，单列自适应
浮动实现
说明：左侧列固定，左侧浮动，右侧列使用margin-left预留位置， 右侧列固定同理
代码演示
