影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:子元素浮动后脱标,不占位置
目的:需要父元素有高度,从而不影响其他网页元素的布局
操作1:
1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear.both
特点:
会在页面中添加额外的标签,会让页面的HTML结构变得复杂
操作2:
用伪元素代替额外标签
写法:
.clearfix::after{
content:' ';
display:block;
clear:both}
补充写法:
.clearfix::after{
content:' ';
display:block;
clear:both
/*在网页中看不见伪元素*/
height:0;
visibility:hidden;
}
特点:
项目中使用,直接给标签加类就可以清除浮动
操作3:
直接给父元素设置overflow:hidden;
特点:
方便