关于塌陷问题

什么是塌陷问题？

当子元素设置浮动之后，子元素会完全脱离文档流。此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷。

代码如下：

.fa{

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

.son{

            width: 50px;

            height: 50px;

            background-color: red;

            margin-top: 100px;

        }

效果图：

产生原因：常态下，父级的第一个子标签为块标签，并且使用了margin或者marfin-top。

解决方案：1、在父级使用border；

           2、在父级不使用margin-top，改用padding-top；

           3、在父级使用overflow：hidden。（推荐）

1、在父级使用border：

代码如下：

.fa{

            width: 200px;

            height: 200px;

            background-color: yellow;

            border: 10px solid transparent;

        }

        .son{

            width: 50px;

            height: 50px;

            background-color: red;

            margin-top: 100px;

        }

效果图：

2、在父级不使用margin-top，改用padding-top：

代码如下：

.fa{

            width: 200px;

            height: 200px;

            background-color: yellow;

            padding-top: 100px;

        }

        .son{

            width: 50px;

            height: 50px;

            background-color: red;

           

        }

效果图：

3、在父级使用overflow：hidden：

代码如下：

.fa{

            width: 200px;

            height: 200px;

            background-color: yellow;

            overflow: hidden;

        }

        .son{

            width: 50px;

            height: 50px;

            background-color: red;

            margin-top: 100px;

           

        }

效果图：