浮动与清除浮动

什么是浮动

• 核心就是一段话，浮动的元素会脱离文档流向左或者向右运动，直到遇到父元素的边缘或者里一个浮动元素
• 浮动最初是用来进行文字环绕效果的

浮动元素的特性

• 浮动的元素是介于block和inline之间的一种存在
• 行内元素可以设置宽高，块元素可以内联排列

浮动带来的负效果

• 由于浮动元素脱离文档流,会造成父元素的高度塌陷

如何清除浮动

1. 在浮动元素最后添加一个空标签,添加属性clear：both
   
   • 缺点：添加了很多不必要的标签，造成代码冗余
2. 父元素 添加属性 overflow：hidden、auto、scroll
   
   • 三种方式实际上是一个原理，他们都会触发BFC（块级格式化上下文），从而实现清除浮动
   • 缺点：元素内包含会超出父元素边界的子元素时，可能会覆盖掉有用的子元素，或是产生了多余的滚动条
3. 父元素也浮动
   
   • 缺点：父元素浮动后会影响与他相邻的元素，这样会影响布局
4. 父元素display:table;
   
   • 缺点：会改变盒模型属性
5. 通过伪元素 :after,:before 来清除浮动

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;// 兼容ie6、7
}

或

.clearfix:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix{
    *zoom:1; // 兼容ie6、7
}