解决float浮动副作用的若干方法

时间:2024-04-09 19:28:52

我们知道浮动在CSS中是一个很重要的属性,它能让网页的布局变得更好看,但是它在好用的同时也有相应的副作用。

  • 浮动产生的副作用

1.当子元素都设置了浮动时,就会导致父元素的塌陷,即父元素撑不开;就是下面这种现象

解决float浮动副作用的若干方法

很明显,父元素并没有被撑开,就是所谓的塌陷,注意这里height应该设置为auto,否则就不叫用子元素撑开;如果前面的元素设置了浮动,那后面的元素就有可能产生异位的现象。

2.如果前面的元素设置了浮动,那后面的元素就有可能产生异位的现象。

解决float浮动副作用的若干方法

所谓的异位就是图中的元素2的位置,如果元素1没有设置左浮动,元素2就不会上来,也不会被元素1挡住。


解释:出现这两点的原因就是因为float浮动会使元素脱离正常的文档流。但是还有一个比较奇怪的现象就是虽然float会脱离正常的文档流,但它还是会占有文本的位子,即文本会环绕在其周围,而不会被覆盖,如下图这种情况:

解决float浮动副作用的若干方法

接下来就进入正题了。。。

  • 消除浮动副作用的方法

1.手动给父元素加高度

 这个方法应该是最容易想到的方法,也是最笨的方法;

2.通过clear属性进行浮动消除

clear属性可以取的值有none,left,right,both,这个属性仿佛就是生来为了和float作对的,float设置浮动,clear就消除浮动,他们完全相反。但他们也是有区别的,我在之前的一个博客里也写过,有一个很好理解的口诀来区分float和clear之间的根本区别,float是一个好人,他只对自己产生影响;而clear就像一个坏人一样,他不允许自己的周围有浮动,给人的感觉就是很霸道的样子。那么具体的怎么用clear解决问题呢?

这个属性主要是为了解决元素异位的问题,不能解决父元素塌陷的问题;针对异位的问题,我们只需要给发生异位的元素设置一个clear属性就行,如果是左浮动,clear的值就取left,其他的相应的去取。

3.给父元素添加浮动

这一招有以毒攻毒的意味,如果子元素设置了left浮动,可以通过给父元素也设置left浮动,这样父元素就能被子元素撑开,因为大家都不在正常的文档流中。

4.给父元素添加overflow结合zoom:1一起使用

这一招就看起来就非常的高大上了,因为好像这两个属性都没听过,那么就听我娓娓道来吧!

这个就是在父元素样式里面加上overflow:hidden;和zoom:1这两个语句,看起来很简单,那么他的主要功能是什么呢?

overflow这个属性仿佛是为了考虑兼容性而诞生的,他有很多的妙用这里我就不详细解说了,overflow主要是处理溢出问题的,我们这里就是子元素相对于父元素出现了溢出现象,举一个更加明显的例子:(还是刚刚的程序,只是加大了子元素的宽度)

解决float浮动副作用的若干方法

上图中子元素超过了父元素的宽度,这个时候overflow:hidden;就发挥了自己的作用,他就像一把剪刀一样把多余的部分减掉了,这也是这个方法的缺陷,很容易将子元素的关键信息删掉。用了overflow:hidden;的结果如下图:

解决float浮动副作用的若干方法

有没有看起来很完美,这就是overflow:hidden;发挥的巨大作用了。接下来,还有一个语句,zoom:1;的作用是为了兼容,大家都知道IE浏览器一直都是一个让人很头疼的东西,这个语句就是为了兼容IE浏览器的问题。