浮动主要考察为什么清除浮动和如何清除浮动的问题。
浮动场景：通常对于块级元素我们是不设置高度的（天知道以后会不会加内容，另外设置了高度会带来显示问题），块级元素的高度是靠子元素内容撑开的。这时，子元素设置浮动，子元素就会脱离文档流，此时父元素的高度就不能靠子元素内容撑开了，就会出现显示（体验）问题。
清除浮动是为了解决页面父元素高度塌陷的问题。
方法一：使用 overflow: hidden（在父元素操作）
副作用是离开了这个元素所在的区域以后会被隐藏（ overflow:hidden 会将超出的部分隐藏起来），不推荐。。
方法二：添加一个标签
在父元素里面加一个标签，标签样式
.clear {
clear: both;
}
副作用就是添加了一个无用标签，不推荐。
方法三：使用伪元素来清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix: after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
方法四：使用双伪元素清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}

浮动主要考察为什么清除浮动和如何清除浮动的问题。
浮动场景：通常对于块级元素我们是不设置高度的（天知道以后会不会加内容，另外设置了高度会带来显示问题），块级元素的高度是靠子元素内容撑开的。这时，子元素设置浮动，子元素就会脱离文档流，此时父元素的高度就不能靠子元素内容撑开了，就会出现显示（体验）问题。
清除浮动是为了解决页面父元素高度塌陷的问题。
方法一：使用 overflow: hidden（在父元素操作）
副作用是离开了这个元素所在的区域以后会被隐藏（ overflow:hidden 会将超出的部分隐藏起来），不推荐。。
方法二：添加一个标签
在父元素里面加一个标签，标签样式
.clear {
clear: both;
}
副作用就是添加了一个无用标签，不推荐。
方法三：使用伪元素来清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix: after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
方法四：使用双伪元素清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}