【笔记】CSS实现清除浮动

发表于 更新于 阅读次数：

前言

CSS实现清除浮动，解决高度塌陷的问题

通过清除浮动解决高度塌陷的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  .clear-fix {
    *zoom: 1; /* 兼容IE7/IE8 */
  }
  
  .clear-fix::after {
    content: '';
    clear: both;
    display: block;
    
    /* 浏览器兼容 */
    visibility: hidden;
    height: 0;
  }
  
  .item {
    float: left;
  }
</style>

<div class="clear-fix">
  <div class="item"></div>
  <div class="item"></div>
</div>

通过BFC原理解决高度塌陷的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .clear-fix {
    height: auto;
    overflow: auto;
  }
  
  .item {
    float: left;
  }
</style>

<div class="clear-fix">
  <div class="item"></div>
  <div class="item"></div>
</div>

完成