以下讨论的是和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属性的值设为".",