当使用浮动后,块级的盒子模型则会脱离标准流,简称脱标.而这时,如果该浮动盒子就相当于飘在上面.而我们知道,当父级元素的盒子未设置宽高时,则其大小由内容撑起来,而当子集元素浮动后,父级盒子就相当于失去了占据页面位置的内容,那么这时宽高就会自动归零导致下一处的盒子根据标准流自动补齐上来,从而发生布局崩坏.
消除浮动的方法一共有以下五种:
1.直接给父级元素设置高度.
这种方法是最简单的,但实际上也是最没用的,因为很多情况下,我们往往不能直接确定父级的高度,因此并不建议使用这种方法.
2.使用额外标签法.
在父级元素下内容的最后面添加一个空的块级盒子,将高度设为0,并设置clear:both属性. 但这种方法同样不太推荐,因为会让代码结构更加复杂,不易维护与调试.
3.单伪元素法.
在父级元素后面使用伪元素并添加clear:both属性.
具体代码演示如下
.clearboth::after{
content:"";
display:block;
//将伪元素的盒子设置为块级盒子
clear:both;
//设置clear:both属性
hight:0;
visibility:hidden;
//设置高度为0,不影响其它元素,并设置为隐藏,增强兼容性.
4.双伪元素法.
在父级元素前后设置after和before两个伪元素,写法与单伪元素法相同.
5.使用overflow:hidden
直接给父级元素设置overflow:hidden属性,此元素会造成许多不明所以的影响,因此非必要不使用.
一般在正常项目中,我们往往在调用通用的base.css文件时就会将单伪元素或者双伪元素的内容写在里面,并设置固定的类名.clearboth,因此,当我们需要给某个盒子消除浮动带来的影响的时候,直接给父级元素添加一个clear:both类名即可.
