CSS清除浮动

清除浮动

  • 让浮动的子元素撑起父元素的高度
    清除浮动方法一: 给父元素直接设置高度
    缺点: 扩展性不好
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#wrap{
  border:1px solid;
  /*1. 直接添加高度*/
  height: 400px;
}

#inner{
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}

<div id="wrap">
     <div id="inner"></div>
</div>
清除浮动方法二: 开启BFC

缺点: IE6浏览器不支持. 有可能会造成一些不可预知的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#wrap{
  border:1px solid;

  /*2. 开启BFC 缺点: 无法兼容IE6*/
  overflow: hidden;
}

#inner{
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}

<div id="wrap">
     <div id="inner"></div>
</div>
清除浮动方法三: 空标签清除浮动

缺点: 结构行为样式不统一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#wrap{
  border:1px solid;
}

#inner{
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}

  <div id="wrap">
     <div id="inner"></div>
     <div style="clear: both"></div> 
  </div>
清除浮动方法四: br标签清除

缺点: 利用html标签属性. 增加了结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#wrap{
  border:1px solid;
}

#inner{
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}

  <div id="wrap">
    <div id="inner"></div>
    <br clear="all"> 
  </div>

清除浮动方法五: 伪元素 (推荐使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#wrap{
  border:1px solid;
}

#inner{
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}

.clearfix{
  *zomm:1; /*兼容IE6和IE7. 触发了haslayout*/
}
.clearfix:after{
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

  <div id="wrap" class="clearfix">
     <div id="inner"></div>
  </div>