3.8.3　内容浮动

在平时制作页面的过程中，对于内容浮动，一般会有3种需求（左浮动、右浮动、居中对齐），另外还有一种清除浮动需求。

对于左右浮动，分别定义了pull-left和pull-right样式。其源码如下：

  1. /* 源码 5650 行*/
  2. .pull-right {  float: right !important;         /*向右浮动*/ }
  3. .pull-left {  float: left !important;           /*向左浮动*/}

而对于居中对齐，使用center-block样式即可，其定义原理是让左右外边距均为auto即可。源码定义如下：

  1. /* 源码 5645 行*/
  2. .center-block {
  3.   display: block;                                       /*将页面元素设置为块级元素*/
  4.   margin-right: auto;                           /*左右居中显示*/
  5.   margin-left: auto;
  6. }

一般某一个元素在浮动以后，在紧接着的元素使用之前可以清除浮动，以避免布局错乱。清除浮动一般是设置元素的before伪类display为table（且content为空），并设置after伪类的clear为both。Bootstrap提供了一个clearfix样式用于清除浮动，其定义如下：

  1. /* 源码 5598 行*/
  2. .clearfix:before,
  3. .clearfix:after {  display: table;  content: " ";}
  4. .clearfix:after {  clear: both;}

查看CSS文件的5598行以后的代码可发现，清除浮动的代码有关有50行左右，主要是对其他一些组件所使用的样式也定义了清除浮动代码（而不用再次应用clearfix），比如为nav样式和modal-footer样式清除浮动，就可以避免后续元素的布局错乱。