CSS浮动：概念、特性与应用

CSS浮动是网页设计和开发中常见的布局技术之一，以下是CSS浮动相关的所有重要知识点：

一、浮动的定义与语法

浮动（float）属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。浮动属性最初只用于在一段文本内浮动图像，实现文字环绕的效果。
作用

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等。
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。
   浮动的语法如下：

float: none | left | right;

属性值	描述
none：	元素不浮动，为默认值。
left：	元素向左浮动。
right：	元素向右浮动。

二、浮动元素的特点

1.脱离标准流：浮动元素会脱离正常的文档流，不再占据其原本在文档中的位置，而是漂浮在其他元素的上方或下方。
2.影响其他元素布局：浮动元素会影响其他元素的排列和布局。如果其他元素没有清除浮动，可能会出现重叠或错位的情况。
具有行内块元素特性：浮动元素会具有行内块元素的特性，即宽度会根据内容自动收缩，高度也会自适应内容。
3.顶端对齐：如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

浮动口诀：

1. 浮动口诀之 浮
   浮动——浮_浮浮~~~漂浮在普通流的上面。 脱离标准流。 俗称 “脱标”

2. 浮动口诀之 漏
   浮动 —— 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准
   流的，我们俗称 “脱标”。
3. 浮动口诀之 特
   浮动——特性 float属性会改变元素display属性。
   任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前
   面的行内块极其相似。

特点

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙。

三、浮动规则

1.向左或向右浮动：浮动元素会向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止。
2.不能超出包含块：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界。
3.浮动元素不能层叠：如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）。如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。
浮动元素会将行内级元素内容推出：浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出。比如行内级元素、inline-block元素、块级元素的文字内容。
4.浮动只能左右浮动，不能超出本行的高度：行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐。

四、浮动的应用

1.图文环绕效果：浮动属性可以实现图像与文字的环绕效果，这是浮动属性的最初应用场景。
2.多列布局：在早期的CSS标准中，并没有提供好的左右布局方案，因此浮动属性一度成为网页多列布局的最常用工具。
3.导航栏等布局：浮动属性也可以用于实现导航栏等复杂布局。

五、浮动带来的问题及解决方法

1.父元素高度塌陷：如果父元素没有设置高度或包含的内容没有清除浮动，父元素的高度将无法正确计算，导致塌陷。解决方法包括使用清除浮动的伪类方法、clearfix类、overflow属性等。
2.元素重叠：如果多个浮动元素在同一行并且宽度超出父元素的宽度，这些元素可能会相互重叠。可以通过调整浮动元素的宽度或使用清除浮动的方法来解决。
文字环绕错乱：如果浮动元素与文本元素相邻，文本可能会受到浮动元素的影响而错位或环绕混乱。可以通过调整浮动元素的位置或使用CSS的其他属性（如margin、padding等）来解决。

六、浮动的扩展

1.浮动元素与父盒子的关系：

• 子盒子的浮动参照父盒子对齐
• 不会与父盒子的边框重叠，也不会超过父盒子的内边距

2.浮动元素与兄弟盒子的关系：

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

七、清除浮动的方法

清除浮动的本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

1.使用空的〈div〉元素进行清除：在浮动元素的末尾添加一个空的〈div〉元素，并为其设置clear: both;样式属性。这将在浮动元素下方创建一个空白元素，使得父容器能够正确地包围浮动元素。但这种方法会增加额外的HTML元素，不利于代码简洁性。
使用伪元素进行清除（推荐使用）：使用::after伪元素为父容器添加一个空的块级元素，并应用clear: both;样式属性。这种方法可以避免额外的HTML元素，且更符合CSS的语义化原则。
2.使用clearfix类进行清除：定义一个clearfix类，并将其应用于包含浮动元素的父容器。通过在父容器上添加clearfix类，将自动清除浮动。这种方法需要额外的CSS代码，但可以减少HTML中的类名使用。
3.使用overflow属性进行清除：将父容器的overflow属性设置为auto或hidden。这将创建一个新的BFC（块格式化上下文）来包含浮动元素。这种方法简单易用，但可能会影响父容器的滚动条显示或内容溢出处理。

综上所述，CSS浮动是一种强大的布局技术，但也需要谨慎使用并选择合适的清除浮动方法来解决其带来的问题。