CSS面试题：如何清除浮动？

浮动的原理是让图片脱离文档流，直接浮在桌面上。我们一般布局的时候都是只设置宽度不设置高度，让内容来自动填充高度。但使用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局会产生混乱,造成高度塌陷,这时候就可以利用清除浮动来解决父元素高度塌陷的问题。

方法一，给父元素加上 .clearfix 使用after伪元素清除浮动 这个方法也有一个缺点,就是不支持IE6,IE7

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 //
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

方法二，给父元素加上 overflow:hidden。

方法三，在需要清除浮动的标签后面添加一个空标签,给其加上clear:both

方法四，给父元素添加高度 注意,父元素高度的设置一定要大于子元素中高度最高的盒子