前端Tip-父级元素的高度塌陷问题

一、什么是高度塌陷？

在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的（子多高，父多高）但当子元素设置浮动之后，子元素会完全脱离文档流，父元素还在文档流中，此时父元素的高度没有子元素撑起，从而导致父元素高度塌陷。（简单说：包含有浮动元素的上一级的元素高度为0，下面的元素就会上去，这样导致页面布局混乱）如下：

<!--html代码-->
    <div class="father">
        我是父盒子
        <div class="box1">我是子盒子1</div>
        <div class="box2">我是浮动盒子2</div>
    </div>

不设置浮动，父元素会被子元素撑起来

设置浮动后

 .box2 {
            float: right;
            height: 200px;
            width: 200px;
            background: rosybrown;
        }

出现这种情况：

浮动盒子从父盒子中掉了出来，所以需要清除浮动！！

二、清除浮动的方法和原理

1.给父元素设置overflow:hidden，同时height不设置或者100%或者auto;
原理参加MDN对BFC的定义
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

 .father {
            width: 250px;
            margin: 100px;
            background: yellowgreen;
            border: 5px solid steelblue;
            overflow: hidden;
        }

2、父级元素内中的最下面新增一个标签（清除浮动的元素），设置样式clear:both；

 <div class="father">
        我是父元素
        <div class="box1">我是子盒子1</div>
        <div class="box2">我是浮动盒子2</div>
        <div class="clear"></div>
    </div>

  .clear {
            clear: both;
        }

效果图如上
Tip:直接给父元素加：clear:both 样式不行（谷歌、火狐）
3、用伪类:after（这和第二条很类似，但是我觉得比第二条好，因为伪类只产生了CSS样式，并不会影响DOM结构,其实我个人，比较推荐这种写法）

  .father:after {
            content: "";
            display: block;
            clear: both;
        }

4、给父元素设置display: inline-block;
效果如上图：
缺点：会导致父元素的宽度丢失