简单理解float浮动

原本意义：实现文字环绕效果

BFC Block formatting context
块级格式化上下文

具有包裹性属性
display：inline-block/table-cell
position:absolute/fixed/sticky
verflow:hidden/scroll

破坏
容器被破坏, 父元素高度塌陷

display：none
position：absolute/fixed/sticky

清除浮动
html元素底部： clear:both
css伪元素底部：.clearfix:after{}

应用于包含浮动子元素的父级元素上

/* IE8 */
.clearfix:after{ content:""; display:block; height:0; overflow:hidden; clear:both;
}

/* IE6, IE7 */
.clearfix{ *zoom:1;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

浮动
1、元素block块状化（砖头化）
2、破坏性造成的紧密排列特性（去空格化）

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/101235321