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