前言浮动是 CSS 中非常重要的布局工具之一，最典型的应用是使多个元素在一行内排列显示。通过浮动，能够实现复杂的页面布局，比如多栏布局的效果，进而创建更灵活和美观的网页设计。浮动的应用场景：
可以使图文混排，文字可以围绕浮动的图片排列。可以用来制作两栏、三栏甚至更多复杂布局。与其他定位方式结合，创建响应式页面布局。
float
1. 什么是浮动属性（float）浮动（float）属性用于将元素变成浮动元素，浮动元素会脱离标准流的控制（即"脱标"），它们移动到父级元素的左右边缘或与其他浮动元素相接。
CSS 中的 float 属性有三个主要取值：
代码语言：javascript复制float: left | right | none;值
描述
left
元素向左浮动。
right
元素向右浮动。
none
默认值。元素不浮动，并会显示在其在文本中出现的位置。
浮动的特性
浮动元素脱离标准流（脱标）
当一个元素被设置为浮动时，它会脱离标准流的控制，也就是说这个浮动元素不再保留原先的位置。脱标的浮动元素并不会占据其原来在标准文档流中的位置，父元素往往会忽略其高度，导致父级元素塌陷。 浮动元素一行内显示并且顶部对齐
如果多个盒子都设置了浮动，它们会在一行内紧密排列，并且默认是顶部对齐的。如果父级宽度装不下这些浮动的盒子，多出来的盒子会自动折行，形成新的排列。 浮动元素具有行内块元素的特性
无论原本的元素是什么类型，一旦设置为浮动，它就会具有类似行内块元素的特性。块级元素默认宽度和父级一样宽，但如果浮动后，它的大小由内容决定，类似行内块元素。浮动元素不会影响其前面的标准流元素，但会影响之后的标准流元素的布局。
2. 浮动布局的设计思路
在使用浮动布局时，通常遵循以下设计思路：
标准流父盒子搭配浮动子盒子
通常将父元素使用标准流排列，这样可以确定各个块级元素的上下关系，然后对子元素进行浮动，确定左右排列关系。 浮动元素折行规则
当浮动元素的总宽度超过父级宽度时，浮动的元素会自动折行。需要注意的是，折行的参考标准是左右两侧浮动元素的最小高度。 所有浮动元素之间紧密排列
浮动的元素之间没有任何缝隙，它们会自动紧挨着对齐。这一点与行内元素类似。 避免部分元素浮动导致布局问题
当一个父元素中的部分子元素浮动时，为避免不稳定的布局结果，通常建议所有兄弟元素都采用浮动。浮动元素只会影响其后的标准流元素，不会影响其前面的元素。示例代码
以下代码展示了如何使用浮动创建简单的三栏布局，其中部分子元素设置了浮动：
代码语言：javascript复制
3. 浮动引发的高度塌陷及解决办法
浮动引发的高度塌陷是指，由于浮动元素脱离标准流，父元素无法捕获浮动元素的高度，导致父元素高度为 0，从而影响页面的整体布局。
高度塌陷的原因
浮动元素脱离标准文档流，因此不再占据原本应该占据的空间。如果父级元素未明确设置高度，并且其子元素都进行了浮动，那么父元素的高度将无法自适应子元素的高度，这就是所谓的高度塌陷问题。高度塌陷的解决方案：清除浮动
清除浮动的目的是让父元素能够捕获浮动子元素的高度，从而避免高度塌陷问题。以下是几种常见的清除浮动方法：
额外标签法（隔墙法）
在浮动元素末尾添加一个空标签，比如
来清除浮动。优点：简单易懂，易于实现。缺点：增加了冗余的无意义标签，不利于页面的结构化。伪元素法在父级元素上使用伪元素 :after 来清除浮动，无需添加额外标签。
示例代码：
代码语言：javascript复制.clearfix::after {
content: "";
display: block;
clear: both;
}将 .clearfix 类应用到父级元素上，即可让父元素捕获浮动子元素的高度。
优点：避免了额外的标签，代码结构更清晰。
父级添加双伪元素
双伪元素法是指同时使用 :before 和 :after 伪元素，配合 clear 来实现浮动清除。直接给父元素添加高度
直接为父元素设置固定高度，这样浮动元素脱标后也不会导致父元素高度塌陷。适用于子元素的高度固定且已知的情况。触发 BFC（块格式化上下文）
可以通过触发 BFC 来清除浮动，常用的触发 BFC 的方法包括： 给父元素添加 overflow: hidden; 或 overflow: auto;。给父元素添加 display: flow-root; 或 position: absolute;。BFC 会让元素内部的所有浮动元素自成一体，不影响外部元素。4. 浮动的底层原理详解
为什么浮动元素会脱离标准流？
浮动的设计初衷是为了实现图文混排，比如使文字围绕图片进行显示。因此，浮动的元素被设计为从正常的标准流中脱离出来，这样页面中的其他元素就可以围绕它进行布局。
浮动元素一旦脱离标准流，就不再占据原本在标准流中的位置。页面中的其他元素会按照浮动元素所处位置的改变来调整自己的位置，这样就能实现类似于水流绕过石块的效果。
为什么父元素会塌陷？
父元素的高度默认是由子元素撑开的，但当子元素浮动并脱离标准流后，父元素认为子元素不再存在，因此无法自动捕获其高度。这种情况就会导致父元素的高度塌陷，影响页面布局的完整性。
清除浮动的本质
清除浮动的本质是让父元素能够感知到其子元素的高度，即使这些子元素已经脱离标准流。通过清除浮动，父元素能够重新捕获子元素的高度，从而保证页面布局的一致性。
5. 浮动制作两栏布局
两栏布局是网页设计中常见的一种布局方式，通常用于制作左侧固定宽度导航栏、右侧自适应内容区域的布局。
两栏布局的实现思路
左侧栏固定宽度，右侧栏自适应 左侧栏设置固定宽度，并向左浮动。右侧栏通过设置 margin-left 为左侧栏的宽度，实现自适应。示例代码
以下是实现两栏布局的 CSS 代码：
代码语言：javascript复制
width: 100%;
}
.left {
float: left;
width: 200px;
background: #f0a;
}
.right {
margin-left: 200px;
background: #aaf;
height: 100px;
}在这个例子中，左侧栏通过 float: left; 浮动，使其固定在左侧，而右侧栏通过设置 margin-left，保证其内容不会与左侧栏重叠。
6. 浮动制作三栏布局
三栏布局通常指页面中包含左右两个固定宽度的侧栏，中间部分为自适应内容。常用于新闻、博客等页面结构。
三栏布局的实现思路
左右两侧固定宽度，中间内容自适应 左侧栏设置固定宽度，向左浮动。右侧栏设置固定宽度，向右浮动。中间内容设置左右 margin，确保它位于左右两侧之间，并能够自适应父元素的宽度。示例代码
代码语言：javascript复制
width: 100%;
}
.left {
float: left;
width: 150px;
background: #f0a;
}
.right {
float: right;
width: 150px;
background: #aaf;
}
.center {
margin-left: 150px;
margin-right: 150px;
background: #afa;
height: 100px;
}在这里，左侧栏和右侧栏分别向左右浮动，中间内容通过设置左右 margin，使其在页面上居中显示并自适应。
7. 浮动的缺点与替代方案
虽然浮动在早期网页设计中应用广泛，但随着 CSS 的不断发展，浮动也有一些局限性：
复杂布局维护难度大
复杂布局中，使用浮动容易引发高度塌陷、布局错乱等问题。 无法垂直对齐
浮动元素无法轻松实现垂直居中。替代方案
现代 CSS 提供了许多替代浮动的布局方式，例如：
Flexbox 布局
Flexbox 是一种一维布局模型，适合用来做水平或垂直方向的元素排列。Flexbox 的优势在于可以轻松实现对齐、分布和弹性伸缩。 Grid 布局
Grid 是一种二维布局模型，可以用来创建更复杂的页面布局。使用 Grid 可以将页面划分为多个区域，并可以在水平和垂直两个方向上同时进行排列。使用 Flexbox 实现两栏布局的示例代码
代码语言：javascript复制
display: flex;
}
.left {
width: 200px;
background: #f0a;
}
.right {
flex: 1;
background: #aaf;
height: 100px;
}在这个示例中，使用了 Flexbox 布局，左侧栏设置固定宽度，右侧内容设置 flex: 1，使其自动占据剩余空间。
小结
CSS 浮动是实现布局的重要工具，但它的应用也带来了很多问题，比如高度塌陷、布局复杂度增加等。随着 CSS 的不断发展，Flexbox 和 Grid 等新布局模型逐渐成为浮动的替代方案，更加方便灵活地实现复杂布局。
在网页开发中，应该根据项目的实际需求选择合适的布局方式，浮动依然可以在一些简单布局中起到作用，而对于复杂的布局结构，推荐使用 Flexbox 和 Grid，以提高代码的可维护性和开发效率。