注册 | 登陆
您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

通过CSS清除网页页面中的浮动层几种方法分享

  稿源:互联网   2018-09-04 20:55:11   点击:   撤稿纠错

以下讨论的是和CSS 浮动层相关的通过CSS清除网页页面中的浮动层几种方法分享 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

介绍通过CSS清除网页页面中的浮动层几种方法分享。

方法一(使用空标签带clear属性)

标签可以是div br hr

在浮动元素后使用一个空元素如

,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用

来进行清理。

优点:简单,代码少,浏览器兼容性好。

缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

在浮动元素下加

.clear{ height:0px;font-size:0;clear:both;},但是在ie6下,块元素有最小高度,即当height<19px时,默认为19px

解决方法:font-size:0;或overflow:hidden; 在浮动元素下加
用以清除浮动

方法二(给浮动元素的父元素添加overflow属性)解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。

使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto

overflow:auto;是让高度自适应,zoom:1;是为了兼容IE6,也可以用height:1%;的方式解决,

注意:zoom不符合W3C标准。overflow:hidden也可以实现。

给浮动元素的容器也添加上浮动属性即可清除内部浮动

缺点:会使其整体浮动,影响布局,不推荐使用。

方法四: (使用after伪对象清除浮动)

after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

通过after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;

二、content属性是必须的,但其值可以为空,讨论该方法的时候content属性的值设为".",