Css 清除浮动的几种方法

1. 为什么添加浮动

在 html 中 的元素分为: 块级元素、行内元素，行内块元素、行内元素，html 中的块级元素都是单独一行显示的，有的时候我们需要它们并列一行显示就需要浮动
添加浮动的块级元素会自动转化成行内块元素

2. 为什么清除浮动

因为浮动脱离了文档流，会浮在下面未浮动的盒子上方，影响整体的布局

3. 清除浮动

1) 额外标签法

在浮动元素的下方添加一个空的块级元素并在 Css 中添加 clear 样式
clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起

	.clear {
			/* both清除左右两侧浮动 */
			/* left	左 */
			/* right	右 */
            clear: both; 
        }

缺点： 需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2) 利用 Css 的 overflow;

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要添加 *zoom: 1; 触发 hasLayout

在添加overflow属性后，浮动元素又回到了文档流，把父元素高度撑起，达到了清除浮动的效果。

	.father {
            overflow: hidden;
            *zoom: 1;
        }

缺点：
overflow: auto 文本超过本身的宽度或高度会有额外的滚动条
overflow:hidden 会溢出隐藏
注意: 是给父元素添加 改样式

3) after伪元素清除浮动

	.clearfix:after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden; /* visibility 属性规定元素是否可见 hidden 隐藏  停职留薪   */
		clear: both;
	}
	.clearfix {
		*zoom: 1;/*ie6,7专门清除浮动的样式*/
	}

注意: 是给父元素添加 .clearfix 类名

4）after、before 双伪元素清除浮动

	.clearfix:before,
	.clearfix:after {
		content: "";
		display: table;	/* （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符 */
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;/*ie6,7专门清除浮动的样式*/
	}

注意: 也是给父元素添加 .clearfix 类名

5）让父元素变成行内块元素

   	
        .father {
           display: inline-block;
           vertical-align: middle;  /* 设置元素的垂直对齐方式 */
        }

如果不添加 vertical-align 两个盒子上下之间会有个小缝隙

缺点： vertical-align 会影响里面文字和图片的对齐方式

6）给父元素设置高度

其实，以上的几种方法（额外标签法除外）最后都是让子元素撑起父元素从而给父元素一个高度，只不过，在实际开发中自己测量高度，而且不利于更新和维护，而且有些盒子高度不固定，不建议直接设高度

如果还有什么其他方法大家可以推荐一下，如果大家觉得文章那个的地方有问题的话请大家多多指教，让你我共同进步一起成长