css float

Posted 2020-06-15

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;

}