CSS清除浮动的原因及方法

  • 时间:
  • 浏览:44
  • 来源:恰卡网

导读本篇内容介绍了“CSS清除浮动的原因及方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读...

本篇内容介绍了“CSS清除浮动的原因及方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

清除浮动的原因

假设一个 div 内部有个浮动的 div,当内部 div 的高度要比外层的父级 div 高度大时,将会导致父级 div 高度无法随着内部 div 的高度自适应,这是由于浮动元素已经脱离了正常文档流,因此无法对父级元素产生影响。举例如下:

代码如下:

A
B

这个方法看似简单,但是如果清除浮动的地方较多,会产生很多无意义的 div,对于整个 HTML 结构无疑是有弊端的。

设定父级 div 高度

这个方法有点 hard code,由于父级 div 无法高度自适应,因此我们可以直接给父级 div 设置一个固定的高度值,如上例,考虑到 border 的值,设定父级 div 高度为 52px。

代码如下:

A
B

这个看上去又简单又实用,但是你不能对父级 div 设置高度,一旦父级 div 设置了固定高度,那么浮动元素超出的部分也会被隐藏。

代码如下:

A
B

设置父级 div 伪类 before && after

这个方法即问题中介绍的新方法,对父级 div 设置伪类 before 和 after 的值。

代码如下:

A
B

这个方法应该是最佳方案,即不会产生无意义的空 div,同时当父级元素高度固定时并不会影响内部的浮动元素高度。但是唯一一点就是伪类的兼容性问题。对于低版本的 IE 浏览器我们可以使用:

代码如下:

#a { zoom:1}

在阅读了 @ShingChi 兄推荐的这篇博文 - http://nicolasgallagher.com/micro-clearfix-hack/ 后,我们还可以进一步地简化代码如下:

代码如下:

A
B

“CSS清除浮动的原因及方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡网网站,小编将为大家输出更多高质量的实用文章!

猜你喜欢

30个上古神话传说(有哪些神话故事)

有哪些神话故事(30个上古神话传说) 神话传说和民间传说,是一个民族和国家的宝贵精神财富,有多少是你没有听说过的,又或是耳熟能详的? 1.盘古开天 传说太古时候,天地不分,整个宇

2021-08-05

布达拉宫简介(布达拉宫资料大全)

布达拉宫资料大全(布达拉宫简介) 布达拉宫坐落于西藏拉萨中心的红山之上,海拔3700余米,建筑总面积13万余平方米,主楼高115.703米,共13层,是西藏地区现存规模最大,样式最全,保存最

2021-08-05

小额投资理财项目有哪些?(小额投资理财有哪几种)

小额投资理财有哪几种?(小额投资理财项目有哪些?) 投资成为了人们比较热衷的事情,普通人也都参与进来,但是普通的人投资跟真正的投资人投资又是有很大的区别的。对于普通人而言

2021-08-05

世界上最美十座桥梁都有哪些?(世界十大最美大桥排行榜)

世界十大最美大桥排行榜(世界上最美十座桥梁都有哪些?) 桥梁是人类所建造的最古老、最壮观、最美丽的建筑工程之一。历史上著名的桥梁,都以鲜明的形象、强烈的艺术感染力,反映了

2021-08-05