float清除浮动

最新推荐文章于 2021-11-17 21:55:31 发布

Dorui

最新推荐文章于 2021-11-17 21:55:31 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Dorui/article/details/79366499

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了float和inline-block在网页布局中的应用及它们带来的问题，包括如何解决inline-block元素间的多余间距以及清除浮动对页面布局的影响。介绍了多种解决方法，如使用clearfix技巧、调整字体大小、设置overflow等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

float(对块级与行内元素的影响)，如何清除浮动

影响： 浮动会使元素具有块级元素和行内元素的特点（即内联块的特点），让块元素在同一行显示。
内联块（inline-block）和浮动（float：left/right/none）（元素脱离文档流，按照浮动方向移动，遇到父级边界或者相邻浮动元素停住）但是无论哪种方式都需要做一些处理：去除inline-block的间隔和去除浮动。

去除inline-block的间隔
1. 去掉换行符（不推荐）；
2. 设置margin-left为负（不推荐）一般中间一个字符大小即一个em；
3. 设置字体大小（推荐）块中默认字体大小设为0。
去除浮动
1. overflow:hidden隐藏/scroll 滚动条/auto，hidden可以清除浮动但有可能隐藏有用的东西（不推荐）（BFC布局原理,这三个overflow的属性为触发BFC）；
2. 父元素直接设置高度（当子元素的高度超过父元素的话会造成布局塌陷）；
3. style=”clear:both;”也可以清除浮动但是会加入空标签（不推荐）；
4. clearfix的方法。

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}  /*（兼容低版本ie  触发haslayout）*/