1、float ：xxx ;

• left 左浮动
• right 右浮动
• none 不浮动

当为一个元素设置浮动后，元素会脱离文档流
元素在浮动后，会尽量在左上 或者 右上浮动，直到遇到父元素的边框

2、特点

• 如果浮动元素上面是以个没有浮动的块元素，那么不会浮动上去
• 浮动的元素不会盖住文字 （自动环绕在元素的周围）
  • 通过浮动来设置 文字环绕图片的效果
• 块元素 脱离文档流后，高度和宽度被内容撑开

• 内联元素脱离文档流之后（设置浮动后） 变成块元素

  3、高度塌陷问题

• 在文档流中，如果父元素不设置高度 默认被子元素撑开

• 但是为子元素设置浮动以后，子元素会完全脱离文档流
  • 此时子元素不会撑起父元素 导致父元素 高度塌陷

    处理方案：

    将父元素的高度写死
    将元素的overflow设置为非visible
    overflow:auto/hidden;
    IE6及以下不支持 但可以这样写 【zoom:1;（只在ie6 ，7中支持）】

通过after伪类 向元素添加一个块元素 对其进行清除浮动

.box1:after{
  content: "";
  display: block ;
  clear:both;
}

4、

解决高度塌陷并且同时解决父子元素的垂直边距不会重叠
.clearfix:befor, .clearfix:after{content:""; display:table; clear:both;}

5、清除浮动

clear:xxx;

• none 不清楚
• left 清除左侧浮动对当前元素的影响
• right 右侧~~~
• both 清除两侧

清除其他浮动元素对当前元素的影响
清除之后 其他元素的位置 会回到之前的位置

6、解决高度塌陷

在高度塌陷的父元素 里面 添加一个 div 设置 clear: xxx;
这样 就通过一个空白的div 撑开了父元素的高 【无副作用/但是添加了多余的结构】