clearfix_清除浮动float的多种clearfix方法总汇

时间: 2017-12-01阅读: 636标签: float

浮动float是常用的css属性,可以设置左浮动float:left;右浮动float:right;不浮动float:none;浮动会影响到前后标签 、引起父容器塌陷,导致页面布局出错等问题。这篇文章就整理清除float的多种方法:


1.使用overflow属性

.clearfix{
   overflow:hidden;width:100%;
}

在浮动元素的父元素添加该属性,必须定义width或者zoom:1,同时不能定义height。overflow的hidden属性会让浏览器会自动检查浮动区域的高度,

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。高度不能定义,只能默认根据子元素的高度。


当然除了还可以使用overflow:auto属性,如下:

.clearfix{
   overflow:auto;_height:1%
}

_height:1%只有ie才认识,在父元素的属性上加上overflow:auto;_height:1%; 父元素闭合的问题就ok了 


2.使用额外标签

.clearfix{
   clear:both;height:0;overflow:hidden;
}

在浮动的元素后面再放一个标签,该标签添加clearfix的样式来清除浮动。

缺点:采用这种方式会额外添加html的标签,容易造成结构的混乱。


3.使用伪元素

.clearfix:after{
      content:"";display:block;height:0;clear:both;visibility:hidden
}
.clearfix{
   *+height:1%;
}
/*兼容IE,或者.clearfix{zoom:1;}*/

在浮动的元素上添加样式clearfix,这是目前比较推荐的写法。


4.其它方法

1、给父元素加display:inline-block;
2、给父元素添加高度;
3、给父元素也加浮动;
4、浮动元素下加<br clear="all"/>  

当然这些方法并不是我们常用的,有很多的缺点,就不一一列举了


总结:

以上就是清除浮动方法的总结,推荐使用方法前三中方法,通过这些知识能解决在工作学习中遇到到浮动问题,相信能帮我们更好的理解浮动。

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/209

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全