float属性用于让元素脱离文档流并实现图文环绕或列布局，其常见场景包括文字环绕图片、多列布局及水平导航菜单。清除浮动的常用方法包括：1. 使用clear属性添加空div，优点是直观但增加了冗余html；2. 通过overflow: hidden或auto创建bfc，优点是无需额外标签但可能裁剪内容；3. clearfix伪元素方法，语义良好且推荐使用。浮动导致父元素高度塌陷的原因在于浮动元素脱离文档流，现代布局如flexbox和grid通过保持子元素在文档流中自动撑开容器高度，从根本上解决了该问题。
CSS的float属性，简单来说，就是让元素“浮动”起来，脱离正常的文档流，然后它可以向左或向右移动，直到碰到父容器的边缘或另一个浮动元素。而“清除浮动”则是为了解决浮动元素脱离文档流后，可能导致其父容器高度塌陷或后续内容布局混乱的问题，通过一些方法让父容器重新“包裹”住浮动元素，或者让后续元素不再受到前面浮动元素的影响。
解决方案
float属性在CSS布局中曾扮演过非常重要的角色，尤其是在弹性盒模型（Flexbox）和网格布局（Grid）出现之前。它的核心作用是让块级元素（或其他任何元素）像文本一样环绕另一个元素，最经典的例子就是文字环绕图片。当你给一个图片设置float: left;，图片就会靠左浮动，旁边的文字就会围绕着它排列。
float的用法很简单，它有几个值：
立即学习“前端免费学习笔记（深入）”；
left: 元素向左浮动。
right: 元素向右浮动。
none: 默认值，不浮动。
inherit: 继承父元素的浮动属性。
一个简单的例子：
@@##@@这是一段文字，它会围绕着左侧的图片进行排列，形成一种图文混排的效果。在早期的网页设计中，这种布局方式非常常见，也很好用。
再来一段文字，看看它是不是也跟着浮动元素排布。通常情况下，后续的块级元素会尝试占据浮动元素旁边的空间。
.float-left { float: left; margin-right: 15px; /* 给图片右侧留点空间 */ width: 150px; height: auto;}.container { border: 1px solid #ccc; padding: 10px;}
你运行这段代码会发现，图片确实浮动了，文字也环绕了。但你可能也会注意到，如果.container这个父元素本身没有固定高度，它可能会“塌陷”，因为它内部的浮动图片已经脱离了它的文档流，导致父元素看不到它了。这就是“浮动塌陷”的问题。
清除浮动就是为了解决这个问题。clear属性是用来阻止元素在浮动元素旁边出现的。它也有几个值：
left: 在左浮动元素下方显示。
right: 在右浮动元素下方显示。
both: 在左右浮动元素下方显示（最常用）。
none: 默认值，不清除浮动。
inherit: 继承父元素的清除属性。
通常，clear属性是应用于浮动元素之后的元素，或者应用于浮动元素的父元素（通过一些技巧）。
浮动元素有哪些常见的布局场景？
虽然现在我们有了更强大的Flexbox和Grid，但float在某些经典场景下依然有其用武之地，或者说，理解它能帮助我们更好地理解CSS布局的历史演变。
最直观的，就是上面提到的图文混排。你想让一张小图在段落左边，文字自然地绕着它走，float: left;就是最直接的解决方案。这在新闻、博客文章中非常普遍。
@@##@@最新消息显示，某项技术取得了突破性进展，预计将在未来几个月内投入市场。专家认为，这将对行业产生深远影响。
这项技术的核心在于其创新的算法，能够显著提升处理效率，同时降低能耗，有望解决当前面临的一些关键瓶颈问题。
其次，在Flexbox和Grid普及之前，float是实现多列布局的利器。比如，一个两列或三列的网站布局，你可能会给左侧边栏设置float: left;，右侧内容区设置float: right;（或者也float: left;然后给宽度），然后用清除浮动来确保页脚在所有列的下方。
主要内容
这里是页面的主要内容区域，它与侧边栏并排显示。这种布局方式在过去非常流行，构建了无数的网站。
这种多列布局方式虽然有效，但维护起来相对复杂，特别是当列高不一致时，还需要额外的技巧来保持视觉上的统一。这也是为什么Flexbox和Grid出现后，大家更倾向于使用它们来构建复杂的网格系统。
最后，float也曾被用来制作水平导航菜单。通过给列表项
float: left;，可以将它们从垂直排列变为水平排列。虽然现在display: inline-block;或Flexbox是更常用的方法，但float也曾是选项之一。
所以，尽管float在现代布局中的地位有所下降，但理解它的这些经典应用场景，能帮助我们更好地阅读和维护旧代码，也能在特定简单场景下快速实现需求。
清除浮动的方法有哪些？各自的优缺点是什么？
清除浮动是使用float时一个绕不开的话题，因为它直接关系到页面布局的正确性。主要有几种方法，每种都有其适用场景和考量。
1. 使用clear属性（在浮动元素之后添加一个清除浮动的元素）这是最直接也最容易理解的方法。你可以在浮动元素之后，添加一个空的div或其他块级元素，并给它设置clear: both;（或left/right根据需要）。
浮动元素A浮动元素B父元素后的内容
div。
2. BFC（块级格式化上下文）方法：overflow: hidden 或 auto当一个元素创建了BFC（Block Formatting Context）时，它会包含其内部的所有浮动元素。overflow: hidden; 或 overflow: auto; 是创建BFC的常见方式。你只需要将这个属性应用到浮动元素的父容器上。
父元素后的内容
overflow: hidden;可能会导致内容被裁剪（如果子元素溢出父元素），overflow: auto;可能会出现不必要的滚动条。这在某些设计中是不可接受的，比如下拉菜单或弹出层可能会被裁剪。
3. clearfix hack（伪元素方法）这是目前最推荐和最常用的清除浮动方法，它结合了伪元素::after来模拟一个清除浮动的元素，但又不需要在HTML中添加额外的标记。
.clearfix::after { content: ""; /* 必须有内容，哪怕是空的 */ display: table; /* 或 block，table兼容性更好 */ clear: both;}.clearfix { /* 针对IE6/7的兼容性处理，现在基本不用了 */ *zoom: 1;}
然后将clearfix类应用到浮动元素的父容器上：
浮动元素A浮动元素B父元素后的内容
div那么直观，需要理解伪元素和display: table;的作用。
选择哪种方法取决于具体情况。在现代开发中，clearfix hack是首选，因为它兼顾了语义和效果。而overflow: hidden;则在确保不会有内容溢出裁剪问题时，是一个非常简洁的替代方案。至于直接添加空div，除非是极简单或临时性的调试，否则应尽量避免。
为什么浮动会引起父元素高度塌陷？以及现代布局方式如何避免这些问题？
理解浮动导致父元素高度塌陷的根本原因，是掌握CSS布局的关键一步。简单来说，浮动元素会脱离其正常的文档流。想象一下，一个房间里所有的家具都规规矩矩地靠墙摆放，房间的高度是由最高的家具决定的。但如果有些家具“飘”了起来，离开了地面，房间的“高度”就不再把它们计算在内了。
在CSS中，当一个元素设置了float属性，它就不再占用父容器的垂直空间。父容器计算自身高度时，只会考虑其正常文档流中的子元素。如果父容器中唯一的子元素或者所有子元素都浮动了，那么父容器就会认为自己里面“空无一物”，它的高度就会塌陷，甚至变成0。这就导致了后续非浮动元素可能会跑到浮动元素下方，甚至覆盖浮动元素。
看一个例子：
我是兄弟元素
你会发现，绿色的父容器可能看起来只有一条边框线，而红色的兄弟元素直接跑到了蓝色浮动元素的旁边，甚至下面，而不是在绿色父容器的下方。这就是高度塌陷的直观表现。清除浮动的方法，本质上都是在某种程度上“欺骗”或“强制”父元素，让它重新“看到”并包含这些浮动子元素，从而正确计算自身高度。
现代布局方式如何避免这些问题？
随着CSS的发展，我们有了更强大、更直观的布局模型，它们从根本上解决了浮动带来的这些副作用，因为它们的设计理念就与float不同。
1. Flexbox（弹性盒模型）Flexbox是一种一维布局系统，用于在容器中排列项目，无论是行还是列。Flex项目（子元素）默认情况下不会脱离文档流。它们始终被Flex容器（父元素）包含着，并且Flex容器会根据其内容（包括Flex项目）自动调整大小。
我是兄弟元素
这里，.flex-container的高度会自动根据最高的.flex-item来撑开，sibling元素会乖乖地排在flex-container的下方。Flexbox提供了强大的对齐、分布空间和排序能力，是构建组件内部布局的理想选择。
2. Grid（网格布局）Grid是二维布局系统，可以同时控制行和列。Grid容器内的所有Grid项目都明确地属于容器的一部分，并且其位置和大小由Grid系统管理。同样，Grid项目不会脱离文档流，Grid容器的高度会根据其所有Grid项目（包括那些跨多行或多列的）自动计算。
我是兄弟元素
和Flexbox一样，grid-container也会自动包含其子元素，高度不会塌陷。Grid非常适合构建整个页面的宏观布局，因为它能轻松创建复杂的行和列结构。
总而言之，Flexbox和Grid通过更高级、更智能的布局算法，使得元素在容器内部的定位和尺寸计算更加健壮和可预测。它们将子元素视为容器的固有部分，而不是像float那样让子元素“飘”出去。因此，在新的项目中，除非有特定的历史包袱或极简单的图文混排需求，我们通常会优先选择Flexbox或Grid来解决布局问题，从而彻底避免了浮动带来的高度塌陷和清除浮动的心智负担。
以上就是CSS的float属性怎么用？如何清除浮动？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1567422.html
微信扫一扫 
支付宝扫一扫 
