CSS中的布局详解（二）：浮动与定位
display：float 浮动详解
在我刚开始学习CSS的时候，看到浮动这个概念，只知道是让一个盒子向左或向右移动，也仅仅在一些简单布局中使用，但后来遇到的许多坑让我意识到，搞清楚浮动究竟是什么还是非常有必要的。
通过查阅网上各种博客文档等，我总结出了浮动的定义：所谓浮动，就是让一个元素脱离标准文档流，漂浮在标准流之上，然后按照指定的方向向左或向右移动，碰到父级边界或者另外一个浮动元素停止。
在前面的总结中已经提到过什么是标准文档流，在布局的时候，浮动脱离标准文档流是非常必要的，比如我们想要让几个块级元素并排显示，这时候用浮动就会显得很方便。
在这篇文章中有关浮动的讲解非常好：CSS浮动
其中作者总结了一个很重要的概念：
假如某个DIV元素A是浮动的，如果A元素的上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行）;如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
但浮动也会带来一个很严重的问题：浮动元素脱离标准文档流，会导致元素重叠或者父元素的高度塌陷。
这时候就要用到清除浮动。
清除浮动，顾名思义就是为了解决浮动带来的一系列问题，也可以理解为打破横向排列。
在上述的那篇文章中，作者还有一个总结很重要：清除浮动的这个规则，只能影响使用清除的元素本身，不能影响其他元素。
下面来总结几种常用的清除浮动的方式。
1. clear属性
例如某个div元素前面的兄弟元素，如果有元素不想受到浮动元素的影响，那么就在这个浮动元素上使用 clear:both即可。
2.给父元素设置高度
一般父元素没有设置高度的情况下，子元素浮动之后，父元素会忽略子元素的高度，导致父元素的高度产生塌陷，对于这样的问题，可以给父元素设置高度来解决。
但这样做必然要计算好高度值才能够设置，因此除了给父元素设置高度，还可以用其他两种办法：
- 给最后一个元素设置clear：both
- 给父元素新建一个BFC
对于第二种方法，在前面的文章中提到过，创建一个BFC的办法有很多，不过在清除浮动中，比较常用的是 overflow:hidden属性。
overflow:hidden是干什么的呢？W3C给出的定义如下：
overflow属性规定当内容溢出元素框时发生的事情。其中hidden代表内容会被修剪，并且其余内容是不可见的。
给父元素设置这个样式，不仅可以清除父级内使用float所产生的浮动，比起其他方法来说，显得更简洁明了。
但是好用归好用，为什么设置了这个样式就能够清除浮动？
查阅了网上的各路大神的文章之后终于有了结论：overflow:hidden的作用是超出元素框部分的内容要被裁剪隐藏，这个裁剪隐藏是根据高度来定的，如果高度的默认值是auto，那么必须先要计算其中浮动元素的高度，也就是其真实高度，再去确定隐藏。overflow：hidden出发了BFC，使得这个元素中的子元素不能影响外部其他元素，所以必须要计算内容的全部高度，才能确定在什么地方开始隐藏。
3.：after方法
这种方法是利用：after和：before来在元素内部插入两个元素快来达到清除浮动的效果，原理类似于clear：both。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
outer {
zoom: 1;
}
.outer :after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>
position属性
position属性有4个值。
1.position：static
默认值，元素都位于标准文档流中，不会受到top、bottom、left、right的影响。
2.position：relative
relative所产生的定位为相对定位，这种定位是相对于元素本身正常的位置，根据top、right、top、bottom等属性在标准文档流中偏移的位置。
设置相对定位属性的元素，无论如何移动，它原本所占的空间是不会变的，就好像在教室里的座位，无论你怎么移动，你的座位始终在那里占着。
而且，relative不会影响除自身以外其他元素的位置，大小。
3.position：absolute
absolute所产生的定位又称为绝对定位，这种定位是直接将元素从标准文档流中拿出来，然后再使用top、right、left、bottom等属性来进行定位。绝对定位元素的位置相对于最近的已定位的父亲，如果元素没有已定位的父亲，那么这个元素位置相对于根元素，也就是html。
绝对定位的元素层叠性由z-index属性来控制，值越大，表明优先级越高，距离观察者越接近。
绝对定位元素能够脱离标准文档流，这一点和浮动有着异曲同工之妙，同样会造成父元素的塌陷，同时和浮动元素一样悬浮在标准文档流的上方，还会遮住下面的内容。
还有一些在使用过程当中应当注意的知识点：
- absolute能让inline元素被“块级”化。
- absolute能让元素已有的float失效
- 相对定位元素一般用来作为绝对定位元素的容器块，也就是口诀：“子绝父相”。
4.position：fixed
fixed和absolute基本一致，也完全脱离标准文档流，但关键区别在于fixed永远是根据浏览器确定位置，即使是窗口滚动他也不会动，所以叫做固定定位。
5.background-position
background-position一般用来设置背景图像的位置。
一般有两个值，如果仅规定了一个值，那么第二个值将默认为center。
background-position:top left;
还可以用百分比来表示，其中第一个表示水平位置，第二个表示垂直位置：
background-position：x% y%;
还可以用像素来表示，值表示的意义同上。
background-position：50px 100px;
参考资料
- 腾讯课堂前端NEXT课程资料文档
- W3Cschool
- CSDN网站布局中position的值的用法
我的个人博客：http://chronosblog.top
我的微信公众号：runtustory
CSS布局详解系列索引：
