css float

float 文档流

float : left | right | none | inherit

文档流是文档中可显示对象在排列时所占的位置

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来

 

clear:left | right | both | none | inherit ; 元素的某个方向上不能有浮动元素

clear:both; 在左右两侧均不允许浮动元素 

 

float 的特征 

1 块在一排显示

2 内联支持宽高

3 默认内容撑开宽度

4 脱离文档流

5 提升层级半层 

 

清除浮动方法 

1 加高

问题：扩展性不好

2 父级浮动

问题： 页面中所有元素都加浮动，margin左右自动失效

3 inline-block 清除浮动方法：

问题：margin左右auto失效

4 空标签清浮动

问题：IE6最小高度19px：解决后IE6下还有2px偏差 

5 br清除浮动

问题：不符合工作中，结构，样式，行为，三者分离的要求

6 after伪类清除浮动方法（现在主流方法）

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

} 

对上面代码的部分注释：

BFC（block formatting context)标准浏览器,下面的属性能够触发此类浏览器

a,float的值不为none 

b,overflow的值不为visible

c,display的值为为table-cell,table-caption,inline-block中的任何一个

d,position的值不为relative和static

e,width|height|min-width|min-height(!aotu)

 

haslayout  IE浏览器，下面的属性能够触发此类浏览器

a,writing-mode:tb-rl

b,-ms-writing-mode:tb-rl

c,zoom:(!normal) 

 

7 overflow:hidden 清除浮动方法

问题：需要配合宽度或者zoom兼容ie6 ie7

 

进一步了解overflow

overflow:scroll | auto | hidden;

overflow:hidden:溢出隐藏（裁刀!） 

 

转载于:https://www.cnblogs.com/jill1231/p/5208571.html