HTML中清除浮动，解决高度塌陷方法

目前所知的8种解决办法

1，给父元素添加高度height（不推荐）缺点：不灵活

2，给父元素添加 overflow：hidden； 会触发BFC 缺点：不能和 position配合使用，超出部分会被隐藏

3，在需要清除浮动的后面添加一个空标签
例如:
css

    .clear {
        clear: both;
    }

html

    <div class="box">内容</div>
    <div class="clear"></div>

缺点：会增加很多空标签

4,万能清除浮动法： （推荐）

clear::after 或 clearfix::after{
content:" ";
clear: both;
display:block;
hight:0;
overflow:hidden;
visibility:hidden;
}

5，给父元素添加 overflow：auto；
缺点：内部宽和高超过父级盒子时，会出现滚动条

6 给父元素也添加浮动 float 父子级一起浮动，成一个整体 （不推荐）

7给父元素添加 display:table； 这是将div变表格 （不推荐）

8 结尾处加 br 标签 clear:both;
< br class=“clearfloat” />
（不推荐）