浮动

标准文档流：
 　　　　　指元素根据块级元素和行内元素的特性，按照从上到下，从左到右的顺序依次排列，这种方式是默认的排列方式
  

一.块级元素和内联元素

　　　　　　　　　　 块级元素内容独占一行，内联元素内容自动拼接
 
　　 display属性：

　　　　　　　　 块级元素与内联元素的相互转换
  　　inline属性:

　　　　　　　　 内联元素的默认值，将内联元素转换为块级元素
 　　 inline-block属性:

　　　　　　　　 内联元素和块级元素特性都存在
  　　none属性:

　　　　　　　　 隐藏元素，隐藏后位置不会被占用
  

二.浮动
　   float: 设置元素的浮动

　   left ：左浮动
  　 right ：右浮动
       none ：默认，不浮动
 
 　  clear: 清除元素浮动
       left : 清除此元素前左浮动元素
       right : 清除此元素前右浮动元素
       both : 清除此元素前左右浮动元素

 

三.防止防止父级边框塌陷的方法
 　　　　浮动元素后面加空div
 　　　　　    　　 简单，空div会造成HTML代码冗余
 　　　　设置父元素的高度
  　　　　　　　　简单，元素固定高会降低扩展性
　　　　 父级添加overflow属性
  　　　　　　　　简单，下拉列表框的场景不能用（经常使用）
 　　　　父级添加伪类after
  　　　　　　　　写法比上面稍微复杂一点，但是没有副作用，推荐使用