浮动会导致元素脱离文档流,内容没有父盒子进行撑开,后面的内容顶上去,有以下几种方案
第一种:给父盒子设置宽高
第二种:给父元素设置 overflow:auto;
第三种:给父元素设置 overflow:hidden;本意是将超出父类的部分隐藏
但是给浮动加了之后子盒子会撑开父盒子偏方
第四种:clear:both清除
clear:both
//写过这个之后会出现magin无效的情况
//可以在加上此属性的类名上在添加一个类名添加高即可解决
第五种单伪元素清除
:after{
content:“ ”;
clear:“both”;
display:block;
height:0;
//overflow:hidden; 这俩可以单独拉出来使用也可加可不加
//visibility:hidden; 隐藏后仍占据空间
}
第六种:双伪元素清除浮动,推荐
clear:after, .clear:before{
content: "";
display:block;
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
overflow: hidden;
}