概论

浮动最开始是为了实现页面中的图文环绕效果,如今被大家广泛用于页面布局之中。

浮动(float)这个属性让我们又爱又恨,爱的是它的功能,恨的是它的负作用,那我们今天就来看看它有什么负作用,我们如何解决这些负作用。

浮动产生的负作用

直接问题

由于子元素开启浮动,导致父元素在计算布局时,无视了内部开启浮动的的子元素,从而导致父元素的高度塌陷(父元素高度为0或者高度错误)

间接问题

1.背景不能显示

虽然父元素(parent元素)设置了background相关CSS样式,但是由于父元素(parent元素)高度为0,导致父元素(parent元素)背景无法显示

2.页面布局错乱

在页面布局时,下面与父元素(parent元素)同级的兄弟元素会占据原本应该被当前父元素(parent元素)占据的位置

清除浮动造成的影响

方法一: 给浮动元素的父元素添加高度

<div id="wrap">
<div id="inner"></div>
</div>

<style>
#wrap{
height:400px;
background-color: red;
}
#inner{
width:300px;
height:300px;
float: left;
background-color: blue;
}
</style>

说明:

1.该方法给父元素添加了高度,从而在布局上将当前的#inner元素与后面的浮动元素从布局上分割开来,相当于清除了浮动带来的影响

2.优点:简单易懂

3.缺点:需要手动设置父元素高度,导致父元素高度无法自适应,维护起来较为麻烦

4.此方法建议少用

方法二:使用外墙元素隔离法

首先我们看下下面的案例,该案例中,由于#inner元素浮动的原因,导致父元素#wrap没有高度,从而下面的#content元素从页面的顶端开始布局,结果布局错乱

<div id="wrap">
<div id="inner"></div>
</div>
<div id="content">123</div>

<style>
#wrap{
background-color: red;
}
#inner{
width:300px;
height:300px;
float: left;
background-color: blue;
}
#content{
background-color: gray;
}
</style>

我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示

<div id="wrap">
<div id="inner"></div>
</div>
<div id="wrap2">”外墙”</div>
<div id="content">123</div>

<style>
#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;
}
</style>

说明:

1. 完美隔开, 现在#content元素完全和前面的浮动元素隔离了

2.你可以随意控制”墙”的高度,来增加#wrap和#content元素之间的距离

3.缺点:

(1)额外增加了一个元素,影响整体结构

(2)#wrap元素的高度塌陷问题没得到解决,依旧没有高度

方法三:使用内墙元素隔离法

在方法二的结尾我们说了,额外增加了一个元素,影响了整体的结构

那么,我们就干脆把这堵”墙”放在#wrap元素内部

<div id="wrap">
<div id="inner"></div>
<div id="wrap2">"内墙"</div>
</div>
<div id="content">123</div>

<style>
#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;
}
</style>

我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示

<div id="wrap">
<div id="inner"></div>
</div>
<div id="wrap2">”外墙”</div>
<div id="content">123</div>

<style>
#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;
}
</style>

说明:

1. 在我们把”墙”放到#wrap元素中,出现了神奇的效果,#wrap元素居然有高度了

2. 原因就是#wrap2元素被固定在浮动元素的下面, #wrap元素想要包含住这个新的<div>则必须自己有高度才行, 然后他就自己有了高度

3.缺点:

(1)额外增加了一个元素,影响整体结构

(2)在相当长的一段时间内, 这个方法是各大公司常用的手段

方法四:使用伪元素隔离法(内墙元素隔离法的升级版)

内墙法效果十分不错,但是对于广大程序猿们来说,能少动手的坚决不多动一下,然而在使用内墙法的时候,我们还要特地去写一个元素来清除浮动,这样对于我们这些高贵的程序猿来说,那是不可能的。

于是CSS中有伪元素这个概念,我们可以借助before和after这两个伪元素来实现内墙法的升级版本。

<div id="wrap">
<div id="inner"></div>
</div>
<div id="content">123</div>

<style>
#wrap{
background-color: red;
}
#inner{
width:300px;
height:300px;
float: left;
background-color: blue;

}
#content{
background-color: gray;
}
</style>

我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示

<div id="wrap">
<div id="inner"></div>
</div>
<div id="content">123</div>

<style>
#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;
}
</style>

说明:

1. 利用该方法能完美地解决浮动的负作用

2. 对于部分垃圾浏览器不兼容伪元素的情况(你懂得是哪些),那就把伪元素的两个冒号改成一个冒号即可

方法五:使用overflow属性

说到overflow属性,大家第一反应就是将溢出父元素的内容隐藏。

然而我们将它用到浮动元素的父元素上时.你会发现以下情况

<div id="wrap">
<div id="inner"></div>
</div>
<div id="content">123</div>

<style>
#wrap{
background-color: red;
overflow:hidden;
}
#inner{
width:300px;
height:300px;
float: left;
background-color: blue;
}
#content{
background-color: gray;
}
</style>

说明:

1. 出现这种情况的主要原因是因为overflow属性的值如果不为visible (默认值),它将会开启BFC(英文: Block Formatting Context,中文:块级格式化上下文)

2. 这种方法清除浮动也不错,对元素的影响较小,但是在某些特殊情况下不适用