清除浮动

清除浮动和闭合浮动

区别:清除浮动虽然排版正确,但是,浮动元素的父元素的高度为空;

闭合浮动:闭合浮动后元素高度正确;


清理浮动的各种方法

1、通过在浮动元素的末尾添加一个空的标签,例如:<div style="clear:both;"></div>

优点:通俗易懂,容易掌握

缺点:添加更多无意义的标签;后期维护困难;

2、使用<br>和其自身的html属性

3、通过设置父元素的overflow:hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1

eg:overflow:hidden; *zoom:1

4、使用:after 伪元素

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

4.1使用伪元素清除浮动的升级版一:

200B:零宽度空格,这个字符基本是不可见的

.clearfix:after {content:"200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 4,296评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 我们在日常开发布局中经常会使用到流体布局,流体布局用到的一个最重要的属性就是浮动,今天就来看看浮动的相关知识。 1...
    一木_qintb阅读 4,831评论 0 2
  • 关于清除浮动的四种方法 浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进...
    jrg陈咪咪sunny阅读 3,978评论 0 1
  • 1、什么是css清除浮动? 在非IE浏览器下,当容器的高度为auto,且容器的内容中有浮动的元素,在这种情况下,容...
    IMike阅读 1,783评论 0 1

友情链接更多精彩内容