css 浮动塌陷

发表于 更新于 分类于

来自这里
css 子元素设置为float之后，脱离文件流，导致父元素撑不起来，解决办法

  1. 父元素也设置为float（不推荐，会影响父元素后面都元素）
  2. 父元素添加 overflow:hidden（诡异的css）
  3. 建立一个空的子div <div style="clear: both"></div>
  4. 通过伪类:after清除浮动，具体如下
    1
    2
    3
    <div class="father">
        <div class="son">子元素</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .son {
        float: left;
    }
    .father:after {
        content: "";
        height: 0;
        width: 0;
        visibility: hidden;
        clear: both;
        display: block;
    }