清除浮动

在写CSS代码的过程中，几乎每一个朋友都遇到过关于清除浮动的问题，但是为什么要清除浮动，在什么情况下清除浮动，清除浮动有哪些方法，都是很让人挠头的问题
今天我们就来详细的讨论一下清除浮动的相关内容。
首先我们为什么要清除浮动？
在我们开发的过程中，盒子的嵌套是非常常见的，但是通常父盒子的高度我们是不会指定的，因为我们也不知道我们的父盒子里面要包括多少的内容，父盒子的高度是里面的子盒子来决定的，而子盒子想要一行排列就必须使用浮动，但是浮动有一个重要特性，浮动是不占位置的，浮动不占位置就无法撑开盒子，所以就出现了父盒子没有被撑开进而影响到下面的布局。
如下图所示
理想状态

实际状态：

那我们在什么情况下要清除浮动呢？
父盒子的高度没有指定，且子盒子是浮动的，这两种情况并存
注意：当你的布局中出现叠层情况就需要考虑是否是浮动引起的

清除浮动的方法：
1.clear： both；
2.在父级属性里面添加 overflow：hidden；
3.使用after伪元素清除浮动(推荐使用)

.clearfix:after{
						content:"";
						display：block；
						height:0;
						visibility:hidden;
						clear: both;
					}
					.clearfix {
						*zoom: 1;
					}

4.使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
						content:"";
						display：table;
					}
					.clearfix:after{
						clear:both;
					}
					.clearfix{
						*zoom: 1;
					}