前言
我们在编辑CSS的时候,经常会使用到很多的工具, 其中包括了使用标准流,浮动,定位来进行各种各样的网页布局。在这个过程中,浮动在进行设置时往往会出现一些问题,接下来就让我们来看看,在编写CSS语言的时候,浮动可能带来的问题。
什么是高度塌陷?
我们在进行网页布局的时候,父盒子的div为了放入很多内容来实现大量的篇章,所以选择不设置高度,用子盒子来撑开盒子。示例如下:
<style>
.box {
border: 1px solid blue;
}
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果如下:
由于网页中div是属于标准流,会独自占领一行,当父元素不设置高度的时候靠子元素撑大,也就是说子元素有多高,父元素就有多高,当子元素浮动后,父元素就会高度塌陷。父元素高度塌陷后,父元素下面的元素就会向上移动,这样会导致整个页面的布局混乱。示例如下:
<style>
.box {
border: 1px solid blue;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果如下:
发生这样情况结果的原因在于浮动本身的特点,浮动的元素会脱标,脱离原本的标准流而不再占用一行,不占用原本的空间,因此父盒子高度为0时,子盒子选择了父盒子的上边框和左边框作为了自己的标准对齐,而父盒子因为没有高度,变成了没有任何内容的div。
解决高度塌陷的四种方法
为了解决浮动发生的高度塌陷问题,我们可以使用清除浮动来解决问题,清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
额外标签法
额外标签法也称为隔墙法,会在浮动元素末尾添加一个空的标签,原理是使用一个空盒子让浮动形成闭合浮动 ,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
代码如下(示例):
<style>
.box {
border: 1px solid blue;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div style="clear: both"></div>
</div>
</body>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
使用overflow
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll,overflow是指溢出的部分,overflow直接使用将溢出部分删除,就可以让浮动盒子留在盒子里。
代码如下(示例):
<style>
.box {
border: 1px solid blue;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
优点:代码简洁
缺点:无法显示溢出的部分
添加:after伪类元素
简单说就是第一种方法的升级版,可以直接在HTML里面的盒子里放入clearfix就可以直接实现清除浮动的效果。
<style>
.box {
border: 1px solid blue;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
</style>
<body>
<div class="box">
<div class="box1 clearfix"></div>
</div>
</body>
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
给父级添加双伪元素
在CSS的style中写下双伪元素的伪类选择器之后,在父级的父子class内写入clearfix就可以实现清除浮动的效果,这个效果在各种大型的网站中使用较多
<style>
.box {
border: 1px solid blue;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<body>
<div class="box clearfix">
<div class="box1"></div>
</div>
</body>
优点:代码更简洁好记
缺点:照顾低版本浏览器
总结
这里只是介绍了集中清除浮动的方法,清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度,则不需要清除浮动。四种清除浮动的方法中,下面三种使用更多,可以根据自己的需求使用。