大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS清除浮动的原因及方法-创新互联

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

创新互联建站长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为白沙黎族企业提供专业的成都网站制作、成都做网站,白沙黎族网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

清除浮动的原因

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

代码如下:



A
 
B


CSS清除浮动的原因及方法

此时,我们就需要手动来清除浮动。

加入空 div

这是我之前的做法,即在结尾处添加一个空的 div,并设置 clear: both 属性。

代码如下:



A
 
B

 


CSS清除浮动的原因及方法

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

设定父级 div 高度

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

代码如下:



A
 
B


 CSS清除浮动的原因及方法


这个方法很快速但也脆弱,一旦内部浮动元素高度发生变化就无效了,所以只能应用于高度固定的场景。

设定父级 div 属性 overflow

直接给父级 div 添加 overflow: hidden 或 overflow: auto 属性,这里以 overflow: hidden 为例。

代码如下:



A
 
B


 CSS清除浮动的原因及方法


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

代码如下:



A
 
B


CSS清除浮动的原因及方法

当使用 overflow: auto 属性同时设定固定高度时效果为:

CSS清除浮动的原因及方法

设置父级 div 伪类 before && after

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

代码如下:



A
 
B


 CSS清除浮动的原因及方法


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

代码如下:


#a {
 zoom:1
}


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

代码如下:



A
 
B


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


网页题目:CSS清除浮动的原因及方法-创新互联
文章转载:http://dzwzjz.com/article/cecjop.html
在线咨询
服务热线
服务热线:028-86922220
TOP