css布局清除浮动的方法

浮动是为了使元素脱离标准流，以便消除块级元素（转化为行内块元素）之间的间隙问题

通常在对多个标签进行浮动时，要使其在一个父级盒子下

要使浮动元素不影响接下来的其他元素，方法有多种

1.给浮动元素所在的父级元素设置高度（但有时父级元素不适合设置高度）

2.在父内容的最后添加一个块级元素 如 <div class="clearfix"></div>,

给添加的块级元素设置

 .clearfix{clear:both}

3.单伪元素清除法：如上，对父元素添加伪元素

.clearfix::after{
                content:'';
                display:block;
                clear: both;
}
/* 下面为补充写法，，使得在网页中看不见伪元素 */
            /* .clearfix::after{
                content:'';
                display: block;
                clear: both;
                height:0;
                visibility: hidden;
            } */

4.双伪元素，不仅解决了浮动，还解决了塌陷问题

    .clearfix::before,/*此处是为了解决外边距塌陷（坑爹现象）问题，因为将父级换成了table;也可以用overflow:hidden解决
            .clearfix::after{/*清除浮动*/
                content:'';
                display:table;
            }
            
            .clearfix::after{/*此块才是真正清除浮动*/
                clear:both;
                
/* 外边距塌陷是指：父子标签均为块级元素，子级加margin会影响父级的位置 */
            }

5.直接给父元素设置overflow：hidden；