小猿圈之HTML/css清除浮动的方法都有哪些？

清楚浮动对于前端学习者是比较了解的，刚开始接触前端就需要了解，那你知道HTML/css清除浮动的方法都有哪些？小猿圈web前端讲师总结了几个方法，希望可以帮助你学习前端。

清除浮动

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动

清除浮动不是不浮动，是清除浮动产生的不利影响

清除浮动的方法

* 给浮动元素的父元素设置高度

* 额外标签法

>给最后一个浮动元素后边添加额外标签，使用clear:both; 不推荐使用，会产生冗余代码。

* 给浮动元素的父元素使用overflow:hidden;  触发bfc,

>如果有子元素，出了父元素的范围，多出的部分会隐藏掉。

* 后伪元素清除浮动

给浮动元素的父元素使用clearfix

.clearfix:after {

content:”.”;

display:block;

height: 0;

line-height: 0;

visibility:hidden;

clear:both;

}

.clearfix {

*Zoom: 1;

}

* 双伪元素清除浮动

给浮动元素的父元素使用双伪元素清除浮动

.clearfix:before,.clearfix:after {

    content:"";

    display: table;

}

.clearfix:after {

    clear: both;

}

以上就是小猿圈web前端讲师对于HTML/css清除浮动的方法的介绍，既然学到了那就去快去试验一下吧前端自学交流群：820024416，记住学习上或者工作上遇到什么问题可以到小猿圈网站上寻找答案的，里面有最新最全的视频还有助教老师指导你学习。