一个高度塌陷问题

,

一个 POSITION:ABSOLUTE 导致的高度塌陷问题

最近在学习 CSS，了解到了子元素浮动或未显示时可能会导致高度塌陷问题，笔记如下：

高度塌陷

父元素的高度默认是被子元素撑开的；但当子元素浮动后，其会完全脱离文档流，再也无法撑起父元素的高度，导致父元素的高度丢失。

而相应的解决方法如下：

  1. 为父元素添加除 visible 外的任意 overflow 属性（开启块级上下文

  2. 在要浮动的元素后添加一个有 clear 属性的伪元素，如下

    1
    2
    3
    4
    5
    .box::after{
    display:block;
    content:"";
    clear:left;
    }

  3. 使用如下的 clearfix 类：

    1
    2
    3
    4
    5
    .clearfix::before,.clearfix::after{
    content:'';
    display:table;
    clear:both;
    }

但是有这么个特例——

position:absolute

为元素添加 position:absolute 一样会导致其脱离文档流，使未指定高度的父元素产生高度塌陷。

所以，当父元素因为子元素有 position:absolute 属性而产生高度塌陷时：

只能通过为父元素指定高度来解决，没有其他办法。

——应该可以利用 JS 来自动获取子元素高度赋给父元素来曲线救国自动化一下。