css 清除浮动

浮动：

（1）如果在标准流中一个盒子里面有多个标签，并且该盒子没有设置高度，那么盒子的高度就由盒子内的多个标签的内容高度撑起。

（2）如果一个盒子里面多个标签都被设为了浮动，父级高度塌陷

 

解决方法：

1、使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

       ps：IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题

2、添加新的空元素对其应用 clear:both

3、父级div定义overflow:hidden

4、父级div定义overflow:auto

5、父级定义高度height

 

代码实例：

html

 <!-- 清除浮动，方法1 利用伪元素清除-->
<div class="case1-div1 clearfix">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<!-- 清除浮动，方法2 添加新的空元素对其应用 clear:both-->
<div class="case2-div1">
  <div class="div2"></div>
  <div class="div3"></div>
  <div class=div4></div><!--  添加一个空元素  -->
</div>
<!-- 清除浮动，方法3 父级div定义overflow:hidden-->
<div class="case3-div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<!-- 清除浮动，方法4 父级div定义overflow:auto-->
<div class="case4-div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<!-- 清除浮动，方法5 父级定义高度height-->
<div class="case5-div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

CSS

/* case1 */
.case1-div1{
  border:2px solid blue;
  }
.clearfix:after{
  content:".";  /*设置内容为空*/         height:0;  /*高度为0*/ 
  line-height:0;  /*行高为0*/
  display:block;  /*将文本转为块级元素*/
  visibility:hidden;  /*将元素隐藏*/
  clear:both;  /*清除浮动*/
}
.clearfix{zoom:1;/*兼容IE*/}
.div2{
  width:100px;
  height:100px;
  background:red;
  float:left;
}
.div3{
  width:100px;
  height:100px;
  background:blue;
  float:left;
}
/* case2 */
.case2-div1{
  margin-top:10px;
  border:2px solid yellow;
}
.div4{
  clear:both; /*对空元素使用clear:both*/
}
/* case3 */
.case3-div1{
  margin-top:10px;
  border:2px solid green;
  overflow:hidden;/*父级div定义overflow:hidden*/
}
/* case4 */
.case4-div1{
  margin-top:10px;
  border:2px solid orange;
  overflow:auto;/*父级div定义overflow:auto*/
}
/* case5 */
.case5-div1{
  margin-top:10px;
  border:2px solid skyblue;
  height:100px;/*父级div设置固定高度*/
}

效果：

 

codepen地址：https://codepen.io/murphyyya/pen/VweZpGp