css中控制元素的浮动和页面布局

1.使用float属性

float:none;是默认值。
float:left;让元素浮动到左边，其他元素围绕在它的右边。
float:right;让元素浮动到右边，其他元素围绕在它的左边。

浮动的元素对文档流的影响与非浮动元素的影响的不同的，它并不会影响父元素或其他祖先元素的高度，因此从这一点来说，它不属于文档流的一部分，只有普通文档流中的内容会影响父元素的高度，因此若一个div内都是浮动元素，那么该div的高度实际为0。

有时候当我们页面布局的时候，一个元素浮动在左边，一个元素浮动在右边，接下来的元素我们希望按正常流布局，在浮动元素的下面。然而却发现下面的元素挤在了浮动元素的中间，就说明了浮动元素不影响文档流。

为了解决这个问题，我们可以使用clear属性清除浮动效果。如果对某个元素使用该属性，该元素和它后面的元素就会显示在浮动元素的下面。分别用clear:left;clear:right;和clear:both;依情况而使用。

大多数时候，这样做没有问题。但如果希望为容器添加一个背景色，由于容器的高度为0，不会显示该背景色。解决的是让容器自身具有清除浮动的能力。

有很多方法可以解决这个问题，但最可靠的使用clearfix方法，只要在css中引入.clearfix规则，然后为浮动元素的父元素添加clearfix类

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

通常也可以使用overflow属性创建自清除浮动元素。

需要注意的是：clear属性是添加到不希望环绕浮动对象的元素上，而clearfix类和overflow属性是应用于浮动元素的父元素或祖先元素的。

2.使用position属性

每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。

.example{
    position: relative;
    top: 1em;
    left: 1em;
}

通过对元素进行绝对定位，即指定它们相对于body或最近的已定位祖先元素，可以让元素脱离正常的文档流。

.example{
    position: absolute;
    top: 1em;
    left: 1em;
}

无论是relative还是absolute，距离数字可正可负，单位可以是px、em、rem。

3.display属性

正常情况下列表都是从上往下依次排列，为了实现上图的布局，我一般都会使用display: inline-block;,然后在调节元素的margin和padding属性即可。