对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。

最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。

该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)

float 的诞生之初并不是为了完成某种高级的布局，而是为了完成一个简单的文字环绕。

float 属性官方给的定义是指定某一个元素沿着其容器的左侧或右侧放置，允许文本和内联元素环绕它。为元素设置该元素后，元素会脱离文档流。

关于脱离文档流的详细说明，请见：深入理解 position 定位属性

float 的属性值主要有三个：

left: 元素向左浮动

right: 元素向右浮动

开启浮动的元素称之为浮动元素

none: 元素不进行浮动

示例代码如下

执行结果如下图所示:

开启 float 属性的元素会具有两个基本特性：

在浮动元素后使用一个空元素如 ，并在CSS中赋予 .clear{clear:both;} 属性即可清理浮动。亦可使用 或 来进行清理。

示例代码如下：

优点：简单，代码少，浏览器兼容性好。 缺点：需要添加大量无语义的 HTML 元素，代码不够优雅，后期不容易维护。

为浮动元素的容器元素添加 overflow:hidden; 或 overflow:auto; 可以达到清除浮动的效果

示例代码如下：

优点：简单，代码少，浏览器支持好

缺点：不适用于高度固定的盒子，内容超出时会被隐藏

示例代码如下：

优点：浏览器支持好，不容易出现怪问题。

缺点：代码多

建议：推荐使用，建议定义公共类，以减少CSS代码