CSS中如何清除浮动

清除浮动语法 clear

• clear: left ———— 清除左侧浮动（几乎不用）
• clear: right ———— 清除右侧浮动（几乎不用）
• clear: both ———— 清除两侧浮动（重点用）

方法一，给父元素加上 .clearfix

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

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

<div class="father hidden"></div> 
.hidden { overflow: hidden; }

方法三，最后一个浮动标签末尾添加一个空标签

<div class="clear"></div> 
.clear { clear: both; }

方法四，使用双伪元素清除浮动

// 给父类添加一个 clearfix
.clearfix: before,
.clearfix: after {
    content: "";
    display: table
}
.clearfix: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}