清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ?

本文阅读 2 分钟
首页 前端笔记 正文

一个块级元素如果没有设置 height,那么其高度就是由里面的子元素撑开,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,如果不清除浮动,父元素会出现高度不够,那样如果设置 border 或者 background 都得不到正确的解析。

正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为 0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。

清除浮动的方式

  • 父级 div 定义 height,原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。
  • 结尾处加空 div 标签 clear: both,原理:添加一个空 div,利用 css 提高的 clear: both 清除浮动,让父级 div 能自动获取到高度。
  • 父级 div 定义 overflow: hidden, 原理:必须定义 width 或 zoom: 1,同时不能定义 height,使用 overflow: hidden 时,浏览器会自动检查浮动区域的高度。
  • 父级 div 也一起浮动 。
  • 父级 div 定义 display: table 。
  • 父级 div 定义 伪类 :after 和 zoom 。
  • 结尾处加 br 标签 clear: both, 原理:父级 div 定义 zoom: 1 来解决 IE 浮动问题,结尾处加 br 标签 clear: both。

总结:比较好的是倒数第 2 种方式,简洁方便。

解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

以前端的角度出发,做好 SEO ,需要考虑什么 ?
« 上一篇 03-12
如何保持浮层水平垂直居中 ?
下一篇 » 03-12

发表评论

惪特博客
  • 文章总数:
    18355 篇
  • 评论总数:
    52548 条
  • 标签总数:
    8664 个
  • 总浏览量:
    16134540 次
  • 最后更新:
    2小时前

最多点赞

随便看看

标签TAG