css清除浮动的几种方法
CSS清除浮动的几种方法
在CSS中,浮动元素是经常使用的一种布局方式,但是浮动元素也可能会导致父元素高度塌陷、子元素溢出等问题,因此需要使用清除浮动的方法。
下面介绍几种实用的清除浮动的方法:
一、使用clear属性
clear属性可以设置一个元素的浮动状态,它有以下几个取值:
- clear:none (默认值)表示元素不清除浮动;
- clear:left 表示元素下方不允许存在左侧浮动元素,即清除左浮动;
- clear:right 表示元素下方不允许存在右侧浮动元素,即清除右浮动;
- clear:both 表示元素下方不允许存在任何浮动元素,即同时清除左右浮动;
例如:下面的代码实现了一个清除浮动的效果:
<div class="parent"> <div class="child left"></div> <div class="child right"></div> <div style="clear:both;"></div> </div>登录后复制
在上述代码中,我们给最后一行添加了一个空的div标签,然后设置其样式的clear属性值为both,由于该元素没有设置宽度和高度,它只是个空标签,所以不会影响页面布局,但是它可以清除浮动效果。
改进一下上述代码,可以将空div标签抽象为一个类,代码如下:
<div class="parent"> <div class="child left"></div> <div class="child right"></div> <div class="clear"></div> </div>登录后复制
.clear { clear: both; height: 0; overflow: hidden; }登录后复制
在上述代码中,我们通过样式为clear类添加height: 0; overflow: hidden; 隐藏了这个空div标签,使其不会影响页面布局。
二、使用伪元素
在CSS3中,使用伪元素可以清除浮动效果,如下所示:
.clearfix:after { content: ''; display: table; clear: both; }登录后复制
在上述代码中,我们给父元素添加了一个clearfix类,并使用伪元素:after来清除浮动效果,通过设置content: ''; display: table;和 clear: both; 实现清除浮动效果。
三、使用overflow属性
将父元素的overflow属性设置为hidden、auto或scroll也可以清除浮动,如下所示:
.parent { overflow: hidden; } .parent { overflow: auto; } .parent { overflow: scroll; }登录后复制
以上三个样式设置都能清除浮动,但是当浮动元素高度超过父元素时,会出现滚动条,影响页面的美观度和易用性。
四、使用BFC(块级格式化上下文)
当一个元素具有BFC属性时,它会将浮动元素包裹在内部,达到清除浮动的效果,BFC的语法如下:
.element { display: block; /* 块级元素 */ overflow: auto; /* 触发BFC */ }登录后复制
在上述代码中,我们给要进行清除浮动的元素设置了display:block; overflow:hidden;或overflow:auto;属性,从而触发了BFC效果。
综上所述,我们可以根据实际需要选用不同的清除浮动的方法,使布局实现美观、合理的效果。
【文章转自阿里云代理商 http://www.558idc.com/aliyun.html 欢迎留下您的宝贵建议】