float浮动相关知识点笔记

Float特征

float: left | right | none | inherit;

1. 块在一排显示
2. 内联支持宽高
3. 默认内容撑开宽度
4. 脱离文档流
5. 提升层级半层

清除浮动的方法

1. 加高
   问题：扩展性不好
2. 父级浮动
   问题：页面中所有元素都加浮动，margin左右自动失效
3. inline-block 清除浮动方法
   问题：margin左右auto失效
4. 空标签清浮动
   问题：IE6最小高度19px;(解决后IE6下还有2px偏差)
5. br 清除浮动
   问题：不符合工作中：结构、样式、行为，三者分离的要求
6. after伪类 清除浮动方法（主流）

   .clearfix:after{
       content: "";
       display: block;
       clear: both; 
   }
   .clearfix{
       zoom:1;
   }
   

   • after伪类：元素内部末尾添加内容；
   • zoom 缩放
     1. 触发IE下 haslayout，使元素根据自身内容计算宽高。
     2. FF不支持；
7. overflow:hidden 清除浮动
   问题：需要配合宽度或者zoom 兼容IE6、IE7
   overflow: scroll | auto | hidden;
   overflow: hidden;溢出隐藏

clear清除浮动

clear : left | right | both | none | inherit; 元素的某个方向上不能有浮动元素
clear : both; 在左右两侧均不允许浮动元素

BFC（block formatting context）标准浏览器

触发方式

1. float 的值不为none
2. overflow 的值不为visible
3. display的值为table-cellm table-caption, inline-block 中的任何一个
4. position 的值不为relative和static
5. width | height | min-width | max-height: (!auto)

haslayout IE浏览器

• zoom : (!normal)