CSS浮动：布局的灵动魔法

序言：

在CSS的世界里，浮动（float）是一个非常神奇且实用的属性，它就像是布局中的魔法棒，能够让网页元素以一种独特的方式排列，创造出各种复杂而美观的布局效果。

一、什么是CSS浮动？

浮动最初是为了实现文字环绕图片的效果而被引入CSS的。简单来说，当我们对一个元素应用了浮动属性后，这个元素就会从文档流的正常排列中脱离出来，然后尽可能地向左或向右移动，直到它碰到包含它的容器的边缘或者另一个浮动元素。

二、浮动的基本属性值

1. left（向左浮动）
当我们将一个元素的float属性设置为left时，这个元素就会向左浮动。例如，在一个包含图片和文字的布局中，如果我们将图片的float属性设置为left，文字就会环绕在图片的右侧，就像在报纸排版中看到的文字环绕图片的效果一样。
 

​

img {
  float: left;
}

2. right（向右浮动）
与向左浮动相反，将元素的float属性设置为right时，元素会向右浮动。这种方式在创建多列布局时非常有用，我们可以将一个列元素向右浮动，让其他元素在其左侧排列。
 

.column - right {
  float: right;
}

3. none（不浮动，默认值）
当元素的float属性为none时，元素按照正常的文档流进行排列，这是元素在没有设置浮动属性时的默认状态。

三、浮动带来的布局变化

1. 脱离文档流
一旦一个元素被设置为浮动，它就不再按照正常的文档流进行排列。这意味着它所在的行中，原本为它预留的空间会被其他非浮动元素占据。例如，如果一个div元素在文档流中原本占据了一行，当我们将它设置为浮动后，其他非浮动的元素可能会“挤”到它原本的位置上。
2. 高度塌陷
这是浮动布局中一个比较棘手的问题。当一个容器元素只包含浮动元素时，由于浮动元素脱离了文档流，容器元素的高度会变为0，就好像容器元素“塌陷”了一样。这可能会导致布局出现意外的效果，比如后续元素的位置错乱等。为了解决这个问题，我们通常会使用一些清除浮动的技巧，如使用clear属性或者使用伪元素来清除浮动。

四、清除浮动

1. 使用clear属性
clear属性可以用来指定一个元素不应该与前面的浮动元素相邻。它有三个主要的值：left、right和none（默认值）。如果我们想要一个元素不与前面的左浮动元素相邻，就可以将它的clear属性设置为left；同理，如果不想与右浮动元素相邻，就设置为right；如果想要完全不受前面浮动元素的影响，就设置为both。
 

.clear - element {
  clear: both;
}

2. 使用伪元素清除浮动
另一种常见的清除浮动的方法是使用伪元素。通过在包含浮动元素的容器元素的末尾添加一个伪元素，并设置它的clear属性为both，可以有效地清除浮动，同时避免了额外添加HTML元素的麻烦。
 

.container::after {
  content: "";
  display: block;
  clear: both;
}

五、浮动在实际布局中的应用

1. 多列布局
通过将不同的列元素设置为向左或向右浮动，我们可以轻松地创建多列布局。例如，一个常见的两列布局可以这样实现：

.left - column {
  float: left;
  width: 30%;
}

.right - column {
  float: right;
  width: 70%;
}

2. 导航菜单
在导航菜单的布局中，我们也可以利用浮动来实现菜单项的水平排列。将每个菜单项设置为向左浮动，就可以让它们在同一行显示。
 

.menu - item {
  float: left;
  margin - right: 10px;
}

Tips：

CSS浮动是一个强大的布局工具，但同时也需要我们小心使用，特别是要注意解决高度塌陷等问题。只有熟练掌握了浮动的特性和使用技巧，我们才能在网页布局的创作中更加得心应手，创造出各种令人惊艳的布局效果。