当css `float` 属性应用于元素时，它会将元素从正常的文档流中移除，使其浮动到其父容器的左侧或右侧，并允许其他内容环绕它。如果仅对一组兄弟元素中的部分元素应用浮动，未浮动的元素将保持在正常的文档流中，并会表现得好像浮动元素不存在一样，从而可能导致视觉上的重叠或父容器的高度“塌陷”，造成布局混乱。
CSS float 的核心机制
CSS中的float属性最初设计用于实现文本环绕图片的效果，但后来也被广泛用于创建多列布局。理解float的关键在于它对元素在“正常文档流”（Normal Document Flow）中的影响。
正常文档流
在没有float属性干预的情况下，HTML元素会按照它们在源代码中出现的顺序进行布局。块级元素（如div, p, h1等）会独占一行，并从上到下垂直堆叠；行内元素（如span, a, img等）则会在同一行内从左到右水平排列，直到空间不足时换行。这就是所谓的正常文档流。
float 的作用
当一个元素被设置为float: left或float: right时，它会发生以下变化：
脱离正常文档流： 浮动元素不再占据其在正常流中的空间。这就像它被提升到一个独立的“层”上，其他非浮动元素会忽略它的存在，并会占据它原本的位置。移动到指定方向： 元素会尽可能地向其父容器的左侧或右侧移动，直到碰到父容器的边缘或另一个浮动元素的边缘。内容环绕： 紧随其后的非浮动内容（通常是文本或行内元素）会环绕浮动元素。
布局场景分析
为了更好地理解float的工作原理，我们通过两种不同的布局场景进行分析。
场景一：所有兄弟元素均浮动
在这种情况下，如果一组兄弟元素（例如两个div）都被设置为浮动，它们会脱离正常文档流，并尝试并排排列。
CSS 示例：
div { width: 250px; height: 100px; border: 5px solid black; color: black; font-weight: bold; margin: 25px;}* { margin: 0px; /* 重置所有元素的默认外边距 */}div#d1 { background-color: red; vertical-align: top; float: left; /* div#d1 浮动到左侧 */ text-align: center; padding: 15px;}div#d2 { float: left; /* div#d2 也浮动到左侧 */ background-color: green; padding: 25px 50px 6px 6px;}
HTML 示例：
结果分析：div#d1被设置为float: left，它脱离文档流并浮动到父容器的左侧。紧接着，div#d2也被设置为float: left，它同样脱离文档流，并尝试浮动到父容器的左侧。由于div#d1已经占据了左侧的空间，div#d2会紧随其后，显示在div#d1的右侧。因此，两个div会并排显示，布局符合预期。
场景二：仅部分兄弟元素浮动
这是导致“塌陷”或布局异常的常见情况。如果一组兄弟元素中只有一个被设置为浮动，而另一个保持在正常文档流中，就会出现问题。
CSS 示例：
div { width: 250px; height: 100px; border: 5px solid black; color: black; font-weight: bold; margin: 25px;}* { margin: 0px;}div#d1 { background-color: red; vertical-align: top; float: left; /* div#d1 浮动到左侧 */ text-align: center; padding: 15px;}div#d2 { /* float: left; */ /* div#d2 未设置浮动 */ background-color: green; padding: 25px 50px 6px 6px;}
HTML 示例：
DIV #1
DIV #2
结果分析：div#d1被设置为float: left，它脱离了正常文档流。此时，div#d1不再占据其在正常流中的空间。div#d2没有设置float属性，因此它仍然处于正常文档流中。在正常文档流中，div#d2会表现得好像div#d1不存在一样，因为它会占据div#d1原本在文档流中的位置。结果是，div#d2的顶部会与div#d1的顶部对齐（或者说，div#d2会从其父容器的左上角开始布局），因为div#d1已经“漂浮”在文档流之上。这导致div#d2的边框和背景会出现在div#d1的下方或重叠，而div#d2的文本内容则会尝试环绕div#d1。这种现象就是所谓的“塌陷”或重叠，因为非浮动元素没有为浮动元素腾出空间。
布局问题与解决方案
当使用float属性时，由于其会将元素脱离正常文档流，常常会导致父容器高度无法包裹浮动子元素，或者兄弟元素之间发生重叠。
常见问题：
父容器塌陷： 如果一个父容器只包含浮动子元素，那么它的高度会“塌陷”为0，因为它不再包含任何正常流中的内容来支撑其高度。元素重叠： 如场景二所示，非浮动元素会忽略浮动元素占据的空间，导致视觉上的重叠。
解决方案：
清除浮动 (clear 属性)：
在浮动元素之后添加一个空的块级元素，并对其应用clear: both;。使用clearfix hack（通过伪元素::after清除浮动），这是一种更优雅且常用的方法。
clearfix 示例：
.clearfix::after { content: ""; display: table; /* 或 block */ clear: both;}
将.clearfix类应用于包含浮动元素的父容器。
BFC（块格式化上下文）：通过创建新的块格式化上下文（Block Formatting Context，BFC），父容器可以包含其内部的浮动子元素。创建BFC的方法包括：
overflow: hidden; (或 auto, scroll)display: flow-root; (现代CSS推荐)display: inline-block;position: absolute; 或 fixed;float: left; (父容器也浮动)
其中，overflow: hidden; 和 display: flow-root; 是最常用的两种。
现代布局方案：Flexbox 和 Grid：对于多列布局或更复杂的布局，强烈推荐使用CSS Flexbox（弹性盒子）或 CSS Grid（网格布局）。它们提供了更强大、更直观的布局控制能力，并且不会像float那样将元素脱离文档流，从而避免了清除浮动等额外处理。
Flexbox 示例：
.container { display: flex; /* 启用Flexbox布局 */}.item { width: 250px; height: 100px; border: 5px solid black; margin: 25px; /* 无需使用 float */}
HTML 示例：
DIV #1
DIV #2
使用Flexbox，两个div会自然地并排显示，且父容器的高度会自动包裹子元素，无需清除浮动。
总结
float属性是CSS布局中的一个重要概念，但其将元素脱离正常文档流的特性是理解其行为的关键。当仅对部分元素应用float时，未浮动的元素会忽略浮动元素占据的空间，从而导致视觉上的重叠或父容器的“塌陷”。为了避免这些问题，开发者需要掌握清除浮动或创建BFC的技巧。然而，对于现代Web布局，更推荐使用Flexbox和Grid等更强大、更灵活的布局模块，它们能以更直观的方式解决布局问题，并减少因float带来的副作用。
以上就是深入理解CSS浮动：为何部分元素浮动会导致布局异常的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594180.html
微信扫一扫 
支付宝扫一扫 
