欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

网站建设中CSS中清除浮动的3种方法

在网页布局中经常使用float浮动属性,如果一个父框架中的子框架都使用浮动,并且在父框架没有设置高度的情况下,子框架的内容会溢出。具体的原因我还没有去研究,只是从平时的工作中总结出解决这个问题的三种方法。

1.添加.clear样式。在样式中加入.clear{clear:both;},接着在父框架中子框架的最后加上<div class="both"></div>这样一个空标签,就能达到内容不溢出的效果。但是这种方法在公司的后台上传后会自动清除空标签,所以只能用下面的几种方法。

2.使用overflow:hidden属性。在父框架的样式中增加overflow:hidden属性,即可消除内容溢出的问题。但用这种方法,父框架的高度只会去适应最后一个子框架的高度。

3.添加.clearfix样式。

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.clearfix{

*zoom:1;/* for IE6 IE7 */

}

以上三种方法是在工作当中运用到的,第一种方法是在某个地方看到的(貌似在W3C上),后两种是同事传授的,分享给大家。至于这三种方法的原理和优缺点,暂时不讨论了。等以后研究过再来更新吧!

(编辑:济南网站建设、济南网站建设公司:畅维网络)

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号