清除浮动的方法及优缺点
概论
浮动最开始是为了实现页面中的图文环绕效果,如今被大家广泛用于页面布局之中。
浮动(float)这个属性让我们又爱又恨,爱的是它的功能,恨的是他的负作用,那我们今天就来看看它有什么负作用,我们如何解决这些负作用。
浮动产生的负作用
直接问题
由于子元素开启浮动,导致父元素在计算布局时,无视了内部开启浮动的的子元素,从而导致父元素的高度塌陷(父元素高度为0或者高度错误)
间接问题
1.背景不能显示
虽然父元素(parent元素)设置了background相关CSS样式,但是由于父元素(parent元素)高度为0,导致父元素(parent元素)背景无法显示
2.页面布局错乱
在页面布局时,下面与父元素(parent元素)同级的兄弟元素会占据原本应该被当前父元素(parent元素)占据的位置
清除浮动造成的影响
方法一: 给浮动元素的父元素添加高度
说明:
- 该方法给父元素添加了高度,从而在布局上将当前的#inner元素与后面的浮动元素从布局上分割开来,相当于清除了浮动带来的影响
- 优点:简单易懂
- 缺点:需要手动设置父元素高度,导致父元素高度无法自适应,维护起来较为麻烦
- 此方法建议少用
方法二:使用外墙元素隔离法
首先我们看下下面的案例,该案例中,由于#inner元素浮动的原因,导致父元素#wrap没有高度,从而下面的#content元素从页面的顶端开始布局,结果布局错乱
我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示
说明:
- 完美隔开, 现在#content元素完全和前面的浮动元素隔离了
- 你可以随意控制”墙”的高度,来增加#wrap和#content元素之间的距离
- 缺点:
(1)额外增加了一个元素,影响整体结构
(2)#wrap元素的高度塌陷问题没得到解决,依旧没有高度
方法三:使用内墙元素隔离法
在方法二的结尾我们说了,额外增加了一个元素,影响了整体的结构
那么,我们就干脆把这堵”墙”放在#wrap元素内部
我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示
说明:
- 在我们把”墙”放到#wrap元素中,出现了神奇的效果,#wrap元素居然有高度了
- 原因就是#wrap2元素被固定在浮动元素的下面,
#wrap元素想要包含住这个新的<div>则必须自己有高度才行, 然后他就自己有了高度 - 缺点:
(1)额外增加了一个元素,影响整体结构
(2)在相当长的一段时间内, 这个方法是各大公司常用的手段
方法四:使用伪元素隔离法(内墙元素隔离法的升级版)
内墙法效果十分不错,但是对于广大程序猿们来说,能少动手的坚决不多动一下,然而在使用内墙法的时候,我们还要特地去写一个元素来清除浮动,这样对于我们这些高贵的程序猿来说,那是不可能的。
于是CSS中有伪元素这个概念,我们可以借助before和after这两个伪元素来实现内墙法的升级版本。
我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示
说明:
- 利用该方法能完美的解决浮动的负作用
- 对于部分垃圾浏览器不兼容伪元素的情况(你懂得是哪些),那就把伪元素的两个冒号改成一个冒号即可
方法五:使用overflow属性
说到overflow属性,大家第一反应就是将溢出父元素的内容隐藏。
然而我们将它用到浮动元素的父元素上时.你会发现以下情况
说明:
- 出现这种情况的主要原因是因为overflow属性的值如果不为visible
(默认值),它将会开启BFC(英文: Block Formatting Context,中文:块级格式化上下文) - 这种方法清除浮动也不错,对元素的影响较小,但是在某些特殊情况下不适用
总结
清除浮动的核心思路就是想尽办法让浮动元素的父元素有高度,以上五种方法中,主要推荐伪元素隔离法或oveflow属性(该方法视情况而定)
块级格式化上下文)