float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
float特征
1、块在一排显示
2、内联支持宽高。(span在float之后就可以支持宽高了。)
3、默认子内容(块元素)撑开宽度。
貌似内联元素本来就是可以撑开的,
<div class="box">
<span class="son">qqq1112222222222222222222222</span>
qqq
</div>
但是子元素为块元素的情况下,就不能被撑开。
1 <div class="box"> 2 <div class="son">qqq1112222222222222222222222</div> 3 qqq 4 </div>
给div.son(子块元素)加一个float:left。就可以了
4、脱离文档流
5、提升层级半层
清除浮动的方法:总结
1.加高-给父级加高度
问题:扩展性不好
2.父级浮动
问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)
3.inline-block 清浮动方法:给父级加
问题:margin左右auto失效;
4.空标签清浮动
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)
5.br清浮动<br clear=”all”/>
问题:不符合工作中:结构、样式、行为,三者分离的要求。
6.after伪类 清浮动方法(现在主流方法)
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}解决ie6不兼容的问题。
after伪类:元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FF 不支持;
7.overflow:hidden 清浮动方法;
问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;
overflow: scroll | auto | hidden; 滚动条//隐藏
overflow:hidden;溢出隐藏(裁刀!)
但是对于一些网页中有返回上层,或者分享链接等小功能模块的overflow就会产生问题,具体什么问题待添加。