码迷,mamicode.com
首页 > Web开发 > 详细

CSS 清除浮动的四种方法

时间:2014-08-08 17:35:26      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:style   color   使用   os   io   strong   ar   问题   

在实际项目中,我们经常会用到float属性来对页面进行布局。当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间。但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果。如果不清除浮动,会导致父元素的高度撑不开等一系列问题。

那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了。


1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)
在浮动元素的后面增加一个块元素,对块元素设置clear:both来清除两边的浮动元素,从而让父元素获得实际的高度。这个块元素可以在浮动元素的父容器上添加伪类来实现。f-clearfix加在浮动元素的父容器上。
.f-clearfix:after{content:‘‘;display:block;height:0;overflow:hidden;clear:both;visibility:hidden;}
.f-clearfix{zoom:1;}

2.对浮动元素的父容器设置高度
这种办法比较局限,通常用于父容器高度确定的情况下。

3.对浮动元素的父容器添加overflow:hidden/auto属性
overflow:hidden/auto相当于是让父级紧贴内容,包括浮动的div元素。使用时必须定义width或zoom:1,不能定义height,和position,不然超出的尺寸会被截掉。

3.让父元素同样浮动。
治标不治本。

 

CSS 清除浮动的四种方法,布布扣,bubuko.com

CSS 清除浮动的四种方法

标签:style   color   使用   os   io   strong   ar   问题   

原文地址:http://www.cnblogs.com/zourong/p/3899528.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!