CSS 浮动（float）布局是网页设计中常用的一种技术。它能够使元素在水平方向上浮动，从而实现网页布局中元素的定位和排列，让元素之间产生一定的空隙和自然的分布。在本文中，我们将深入剖析 CSS 中的 float 布局模型，探究它的基本原理和常见用法。

一、float 的基本原理

1. float 的定义

先来看一下 float 的定义：float 是一种布局方式，将元素向左或向右浮动，直到遇到容器或其他浮动元素为止。float 实际上是一种元素定位方式，可以用来实现文字环绕图片的效果或者网页元素的流动布局。

2. float 的用法

float 有如下两种属性值：

- left：元素向左浮动；

- right：元素向右浮动。

float 属性只有在容器和浮动元素之间才会产生影响。如果一个元素是浮动的，那么容器就会把它当做一个不占用空间的元素处理。这就允许其他元素在容器中相对它的位置进行定位。

3. float 的影响

float 元素对页面的影响主要在以下两个方面：

- 浮动元素能够让后面的元素环绕它，形成文字环绕图片的效果；

- 浮动元素会脱离文档流，并不占用正常的文档流位置，会影响后面的流动，需要清除浮动才能解决。

二、float 布局的应用

1. 制作导航栏

导航栏一般采用 float 布局，可以先写一个 HTML 结构：

```html

```

然后在 CSS 中定义样式：

```css

nav {

background-color: #5d5d5d;

height: 50px;

}

.nav-list {

list-style: none;

margin: 0;

padding: 0;

}

.nav-list li {

float: left;

padding: 10px 20px;

}

.nav-list li a {

color: #fff;

text-decoration: none;

}

.nav-list li:hover {

background-color: #444;

}

```

2. 制作图文混排

使用 float 布局可以实现图文混排的效果。我们来看下面的 HTML 结构：

```html