CSS-清除浮动

起因：盒子的高度问题

在没有给盒子设置高度的情况下

（1）如果在标准流中一个盒子里面有多个标签，并且该盒子没有设置高度，那么盒子的高度就由盒子内的多个标签的内容高度撑起。
（2）如果一个盒子里面多个标签都被设为了浮动，那么浮动元素内容的高是不可以撑起盒子的高。

image.png

浮动带来的问题:

(1)如果一个盒子里面多个标签都被设为了浮动，那么浮动元素内容的高是不可以撑起盒子的高。

清除浮动

1、

外墙法和内墙法
外墙法是在父盒子的外面增加一个div，然后设置其clear:both,这样虽然可以清处浮动不影响后面的盒子的布局，但是撑不起盒子的高度
内墙法是在父盒子的里面的最后面增加一个div，然后设置其clear:both,这样可以清楚浮动并撑起高度

2、

clear:both
content:".",里面尽量有内容，如一个小点，为了防止之前的浏览器有空隙,这里的图片也没有加内容，以后记得加
height:0,因为增加了内容，所以会自动有高度和宽度，因为我们不想让这个伪元素显示出来，所以设置了高度为零
visibility:hidden，这个是设置该元素为隐藏

image.png

3、双伪元素清除浮动(强烈推荐)

不仅可以清除浮动，也可以解决高度塌陷的问题（给父盒子添加类名clearfix）

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";    /*不用有内容也可以*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }