CSS——清除浮动

浮动的影响

脱标的子元素不能撑开标准流的父元素，会影响其他网页元素的布局，如图：

 

清除浮动的方法

1.直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表

2.额外标签法

操作：在父元素内容的最后添加一个块级元素，给添加的块级元素设置 clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法

优点：用伪元素替代了额外标签

.clearfix::after{
    content:'';
    display:block;
    clear:both;
/*补充代码：在网页中看不到伪元素*/
    height:0;
    visibility:hidden;
}

4.双伪元素清楚法

优点：项目中使用，直接给标签加类即可清除浮

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
}
.clearfix::after{
    clear: both;
}

5.给父元素设置overflow：hidden

直接给父元素设置overflow:hidden