浮动与清除浮动

浮动
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伪元素 清浮动方法(现在主流方法)
.clear:after{
display: block;
content: '';
clear: both;
height: 0;
visibility: hidden;
overflow: hidden;
}
.clear{
*zoom:1;
}

after伪元素: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放 ie6 7兼容

7.overflow:hidden 清浮动方法;
8.position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 原文地址:浮动与清除浮动 浮动 浮动的概念 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素...
    薛普定朗谔克阅读 787评论 3 14
  • 有些属性就像姑娘一样让人爱的深沉,又像敌人一样让人肉痛不已,float即是如此。 什么是浮动   浮动是脱离文档的...
    果汁凉茶丶阅读 1,637评论 0 3
  • 一、CSS浮动 1、三个固定宽度与高度的框,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包...
    张延伟阅读 574评论 0 4
  • 浮动float 文档流 文档中可显示对象在排列时所占用的位置 浮动的定义 使元素脱离文档流,按照指定的方向发生移动...
    MonkeyDwwl阅读 183评论 1 1