浮动定义

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

一.块级元素和内联元素

 块级元素内容独占一行，内联元素内容自动拼接
 
 display属性： 块级元素与内联元素的相互转换
 
  block: 块级元素的默认值，将内联元素转换成块级元素
  inline: 内联元素的默认值，将内联元素转换为块级元素
  inline-block: 内联元素和块级元素特性都存在
  none: 隐藏元素，隐藏后位置不会被占用
  

二.浮动
 
 float: 设置元素的浮动
  left ：左浮动
  right ：右浮动
  none ：默认，不浮动
 
 clear: 清除元素浮动
  left :清除此元素前左浮动元素
  right :清除此元素前右浮动元素
  both :清除此元素前左右浮动元素

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

转载于:https://www.cnblogs.com/zhaolijun123/p/9908693.html