清楚浮动的那些事

我们经常碰到的一种布局问题，就是两个容器并排分布。

这时候我们考虑的就是如何实现，如果是小容器我们考虑的可能是display:inblock来实现

但是如果是两个大容器，更多的时候我考虑的都是浮动来完成布局。

但是很多时候我们对去清除浮动都是一种似懂非懂的方法，关于清除浮动有以下几个常见的方法：

一、父级容器给死高度

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

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

二、浮动容器后面加一个空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的时候如果子元素超出父元素的宽度就会出现滚动条。

 

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

来源：http://www.cnblogs.com/hx1992/p/3791587.html

参考：解读浮动闭合最佳方案：clearfix

转载于:https://www.cnblogs.com/linsanshu/p/5744568.html