清除浮动的几种方法

原文地址http://www.cnblogs.com/hx1992/p/3791587.html
一、父级容器给死高度

这样的话就能很好的解决浮动的问题,但是也有一定的局限性。很多时候我们的父容器的的高度都是自动的,根本不能定死。

所以这时候就需要用到其他的方法。

二、浮动容器后面加一个空div标签 clear:both

这个方法现在应该也有蛮多的人在使用,就是在浮动元素的后面添加一个空的div标签。然后给这个div添加style样式clear:both

也能很有效的解决浮动问题但是这样的话如果一个页面有很多要用到浮动的地方,那你就要添加很多个空的div这样的话就会很麻烦,

而且这样也很难理解。所以现在还是用的蛮少。

三、父级div定义 伪类:after 和 zoom

这个方法是我本人目前喜欢用的一个方法

通过定义一个类

/清除浮动样式/
.clear:after{
content:"\0020";display:block;height:0;clear:both;
}
.clear{
zoom:1;
}

在需要用的时候就给有浮动的容器的父容器添加这个类 就能很好的解决浮动问题,个人感觉很方便,比较推荐这个方法

四、父级div定义 overflow:hidden或者overflow:auto

这个方法有一定的局限性,必须要定义width或者zoom:1,同时不能定义height,因为使用hidden或者auto的时候,浏览器会自动检查浮动区域的高度。

另外使用hidden的时候不能和position一起使用 那样的话超出的部分就会被隐藏,而当用auto的时候如果子元素超出父元素的宽度就会出现滚动条。

其他的一些方法就不一一介绍了,都是些仅限了解就可以了。没有太多的使用价值。如果真感兴趣的可以去网上查查,网上还是有很多的资料的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 浮动的几个重要性质 首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动...
    赵镇阅读 1,005评论 2 22
  • 1.为何要清除浮动 下面看一个非常简单的实例,为方便 效果如下图,蓝色父类的高度随着子元素高度变化而变化 当在子元...
    LOVE小狼阅读 205评论 0 0
  • 我们在日常开发布局中经常会使用到流体布局,流体布局用到的一个最重要的属性就是浮动,今天就来看看浮动的相关知识。 1...
    一木_qintb阅读 1,137评论 0 2
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 858评论 0 6