北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 清除浮动的几种方法

时间: 来源:火星人

浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。

我们知道,在一个父元素内如果遇到某个浮动元素,此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题,现在已经有了很多的解决方案。针对每一个方案,我们来进行深度的剖析。

添加空块级元素

这种方法比较容易,但是要注意的是这个空元素必须是一个块级元素,不能是行内元素或者是行内块元素。缺点就是多了一些没有意义的标签。

之所以可以使用clear属性清除浮动带来的额外影响,还要回归clear属性的本质。

clear属性规定元素的哪一侧不允许其他浮动元素。

本质:在CSS2.1中,clear属性会给清除元素(即设置了clear属性的元素)的上外边距之上添加清除空间,而元素本身的外边距并不改变。再说的详细一些,也就是给元素设置clear:left|right|both时,会使清除元素的上外边距边界刚好在该边上浮动元素的下外边距边界之下。

overflow

在父元素中设置overflow:hidden|auto|scroll可以解决父元素高度塌陷的问题。

使用 br标签和其自身的 html属性

这个方法有些小众,br 有 clear=“all | left | right | none” 属性

优点:比空标签方式语义稍强,代码量较少

缺点:同样有违结构与表现的分离,不推荐使用

:after伪元素

在父元素上增加:after伪元素,可以解决父元素高度塌陷的问题。

要理解伪元素解决父元素高度塌陷的方案,需要知道额外的一些知识。

浮动

当某个元素发生浮动(left || right)时,该元素会脱离普通文档流。

当某个元素发生浮动,并且DOM后面的元素没有文本内容时,此时浮动元素会覆盖掉紧跟其后的元素。

当某个元素发生浮动,并且DOM后面的元素具有文本内容时,此时浮动元素同样会覆盖掉紧跟其后的元素,但是文字环绕在float元素周围显示,而不是被覆盖。

伪元素

伪元素,顾名思义是一个在某个元素之后添加内容。

伪元素内容的添加必须放在content属性里面。

伪元素是行内元素,不过可以通过display改变伪元素的框的类型。 设置伪元素的内容为'.',content的内容放什么都可以。

设置height:0;

设置visibility:hidden。这里是要让content隐藏掉。

设置clear:both。 清除伪元素的两侧都不允许出现浮动。

v 最重要的是设置display属性为block,并且只能是block,不能是inline-block。前面也说过,伪元素是行内元素,行内元素是无法设置宽高的。设置display:block,此时元素可以设置宽高,将height:0,此时元素不占据任何高度。如果只设置了前四个属性,而没有改变伪元素的display,将会没有效果。

这里有一个更好的方案

.clearfix{//兼容ie
*zoom:1;
}
.clearfix:after{
content: "";
display: table;
clear: both;
}

这里介绍了几种清除浮动带来的额外影响的几种方法,这里所说的额外影响指的是浮动元素给兄弟元素和父元素带来的影响。这里做一个小小的总结:

添加空div和:after伪元素的有一个共同的思想:就是使用clear属性。clear属性会给清除元素(即设置了clear属性的元素)的上外边距之上增加清除空间,而元素本身外边距并不改变。并且会使清除元素的上外边距的边界刚好在浮动元素的下外边距边界之下。所以才能达到清除浮动带来额外影响的效果。

父元素使用overflow不为visible,也就是设置overflow:hidden|auto,此时也可以达到清除浮动的效果。

但是我不建议使用overflow:hidden|auto,因为是应用了.clearfix和.menu的菜单极有可能是多级的,会把下拉的菜单隐藏掉或者出滚动条。所以overflow: hidden或overflow: auto也不适用

关键词:北京web前端培训,北京web培训,北京前端培训,北京前端开发

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号