清除浮动的三种方法 clear: both、width: 100%;overflow: hidden、换行_CSS学习

资料来源：网络整理时间：2023/3/4 0:56:49 共计：3618 浏览

在写网页的时候经常会遇到各种浮动，比如你使用了float，就会造成紧跟在其后的元素产生影响，比如

<style>

.box1{float:left;}

.box2{}

</style>

此时，对box1进行了左浮动，那么盒子2本来是另起一行的块级元素，因为收到box1的浮动影响，会变成跟进box1的行内元素了，如果要摆脱box1的浮动影响，可以对box2浮动进行清除！

方法1：（推荐）

对box2进行清除浮动，增加：

box2{clear:both} 意为清除前后所有浮动

方法2：width: 100%;overflow: hidden

意为宽度改为100%，并隐藏浮动

方法3：使用br进行换行，这种情况也是可以的，要根据实际情况可能需要多个br才能完成换行清除浮动，最不建议使用！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。