CSS浮动和清除浮动

float

• float: left ：左浮动
• float: right ：右浮动
• float: none ：默认，不浮动。

浮动是如何工作的

浮动元素会脱离正常的文档流布局，并吸附到父元素的左侧（float: left）,在正常布局中本应该位于浮动下的元素就会挤上去，造成重叠。
对于文字、图片等内容，浮动元素不会覆盖到这些，这些元素此时会围绕浮动元素填充，就是文字环绕效果

浮动元素的一些特性

• 浮动元素在排列时会根据前一个元素的位置来布局
• 右浮动的顺序问题：先出现的最靠右：原因是源代码顺序上，在DOM上先出现的浮动元素等级高于后出现的
• 浮动元素的margin不会超出包含块
• 浮动元素的重叠问题：
  1. 浮动元素不会覆盖文字、图片内容、表单元素
  2. 行内元素与浮动元素发生重叠，其边框、背景和内容都会显示在浮动元素之上
  3. 块元素与浮动元素重叠，内容会显示在浮动元素之上，但背景边框会显示在浮动元素之下

clear

clear 属性规定元素的哪一侧不允许其他浮动元素。
即就是谁不想受到float影响谁就增加clear样式

• clear: left ：清楚元素左边的浮动（左边不允许浮动元素）
• clear: right ：清楚元素右边的浮动（右边不允许浮动元素）
• clear: both ：清楚元素左右两边的浮动（左右两边不允许浮动元素）
• clear: none ：默认

父元素高度塌陷

原因

块级元素没有设置高度时它的高度是由子元素的高度来决定的。子元素为浮动元素时，会脱离正常文档流，父元素不会被浮动元素撑开，就导致父元素没有高度，就是父元素高度塌陷。

解决方法

1. 给定父元素高度：
   操作简单，但可能不符合设计需求
2. 父元素设置浮动：
   不实用
3. 添加空元素<div style="clear: both;"></div>：
   会多出许多没实际意义的空节点
4. 父元素设置class样式overflow: hidden/auto：
   可能无法满足设计需求
5. 父元素设置伪元素来清除浮动（所谓clearfix方法）：

   #father::after{
    content:'';
    display: block;
    clear: both;
   }
   

6. 父元素设置dispaly: flow-root：
   兼容性不好，不支持IE10以下