清除浮动的四种方式

为什么需要清除浮动？
① 父级没高度。
② 子盒子浮动了。
③ 影响下面布局了,我们就应该清除浮动。

1、在结尾处添加空的块级标签，如div，并添加清除浮动样式

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的的标签，结构化较差

.clear{
            clear: both;
        }

2、给父级元素添加overflow：hidden

• 优点：书写简单
• 缺点：溢出隐藏

.box{
            width: 800px;
            background-color: pink;
            margin: 0 auto;
            overflow: hidden;
        }

3.给父级元素添加:after伪元素

• 优点：结构语义化正确
• 缺点：由于IE6-7不支持:after,有兼容性问题

 .clearfix:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            /* 兼容IE6、7专用 */
            *zoom: 1;
        }

4、给父级元素添加双伪元素

• 优点：结构语义化正确
• 缺点：由于IE6-7不支持,有兼容性问题

.clearfix:before,.clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear:both;
        }
        
        .clearfix {
            /* 兼容IE6、7专用 */
            *zoom: 1;
        }