CSS常用清除浮动方式总结

浮动(float)简介

CSS浮动属性(float)最早是为了完成文字环绕效果来开发的，后来被用于布局，可以让元素脱离文档流，但也正是脱离了文档流才引起了各种布局问题。
在父元素不定宽高的情况下，我们一般希望父元素由子元素撑开，但通过浮动脱离了文档流的元素不会撑开父元素，也就改变了页面的布局，这也是遇到的浮动问题

解决办法

基础HTML标签

<div class="box">
        <div class="a">
        </div>
        <!-- <div class="b">   注释是只有一种情况用到
        </div> -->
 </div>

基础CSS样式

.box{
	color: red;
}
.a{
	width:300px;
	height: 300px;
	background-color: blueviolet;
	float: left;
}

清除浮动

1. 给父元素添加overflow属性,属性值为 hidden/auto/scorll 都可(会溢出隐藏)

.box{
	overflow: hidden;
}  /* 这种情况会使内容溢出隐藏*/

2. 给兄弟元素添加clear属性(需要多创建一个无用元素)

.b{
	clear: both;/* clear属性是专门用来清除浮动的，属性值有 left、right、both，left可以清除左浮动，
	right可以清除右浮动，both全清除，使用选择取决个人*/
}

3. 对第二种方式优化，利用伪元素方式，不用创建多余元素

.box::after{ /* 注意伪元素需要加给父元素 */
	content: ""; /* conten必须存在，可以没有值的内容，但是如果没有content，则伪元素不存在*/
	display: block; /* 将伪元素转为块元素，否则无效，属性值可以为table；为table则开启BFC，而
	block 不会开启BFC*/
	clear: both;
	visibility: hidden; /* 表示占了空间*/
}

4. 给父元素也添加浮动(开个玩笑)
   这样父元素可以被撑开，但是不能解决布局问题，因为父元素也脱离了文档流

总结

以上三种方式都可以清除浮动，各有各的优点，但他们都不能兼容IE6/7,而且各有各的不足，总结一个通用的

.clearfix::before, .clearfix::after{
            content: "";
            display: table; 
            clear: both;
            visibility: hidden;  
} 
.clearfix{
	*zoom:1; /* 兼容ie6/7 */
}

将以上代码放入通用css样式表中，需要清除时给父元素添加一个 class 即可解决