浮动属性float用于元素靠左或靠右排列，实现文字环绕或布局，取值有left、right、none、inherit；浮动元素脱离文档流，导致父容器塌陷，需用clear:both或伪元素clearfix清除。
浮动属性 float 是 CSS 中用于控制元素在父容器中靠左或靠右排列的一种布局方式。它最初设计用于实现文字环绕图片的效果，后来被广泛用于多列布局的构建。虽然现代布局更多使用 Flexbox 或 Grid，但理解 float 仍对维护旧代码和掌握 CSS 布局演变有帮助。
float 的基本取值
float 属性可以设置以下几种常用值：
left：元素向左浮动，其他内容围绕其右侧和下方显示。 right：元素向右浮动，其他内容围绕其左侧和下方显示。 none：默认值，元素不浮动。 inherit：继承父元素的浮动设置（较少使用）。
示例：
.box1 { float: left; }
.box2 { float: right; }
浮动元素的特点
当一个元素设置了 float，它会脱离正常的文档流，尽可能往指定方向移动，直到碰到父容器边缘或其他浮动元素。
立即学习“前端免费学习笔记（深入）”；
块级元素浮动后仍保持块级特性，但会收缩到内容宽度（除非设置 width）。 多个同方向浮动的元素会依次排列，直到一行放不下时换行。 文本、内联元素会围绕在浮动元素周围，这是 float 最初的设计目的。
清除浮动（Clear Floats）
由于浮动元素脱离文档流，可能导致父容器高度塌陷（无法包含子浮动元素），因此需要“清除浮动”。
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
使用 clear 属性来控制元素是否允许出现在浮动元素旁边：
clear: left;：不允许左侧有浮动元素。 clear: right;：不允许右侧有浮动元素。 clear: both;：左右都不允许有浮动元素。
常见清除方法之一是在浮动元素末尾添加一个清除元素：
另一种推荐做法是使用伪元素清除法（clearfix）：
.clearfix::after {
content: “”;
display: block;
clear: both;
}
然后将 clearfix 类应用到父容器上即可防止高度塌陷。
基本上就这些。float 虽然简单，但容易引发布局问题，关键是理解它脱离文档流的特性以及如何正确清除。
以上就是css浮动属性float基础使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1070704.html
微信扫一扫 
支付宝扫一扫 
