浮动清除与定位

浮动，意思就是把元素从常规文档流中拿出来。拿出来干什么？

一是可以实现传统出版物上那种文字绕排图片的效果，

二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏，

浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。用clear 属性来清除浮动。

 

浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。要想父元素包围它，有3中方法

为父元素添加overflow:hidden

实际上，overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden 之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外，overflow:hidden 还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素

不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了

让父元素浮动起来

不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中

添加非浮动的清除元素

给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种

a. 简单地在HTML 标记中添加一个子元素, 并给它应用clear 属性。由于没有默认的样式，不会引入多余空间，div 元素很适合这个目的

b. 如果你特别不想添加这个纯表现性元素，我再告诉你一个用CSS 来添加这个清除元素的方法

.clearfix:after {
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
 /*规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见*/

}

相对定位

相对的是它原来在文档流中的位置（或者默认位置）可以使用top、right、bottom 和left 属性来改变它的位置了。但多数情况下，只用top 和left 就可以实现

我们想要的效果。以下CSS 规则

p#specialpara {position:relative; top:25px; left:30px;}

要注意，除了这个元素自己相对于原始位置挪动了一下之外，页面没有发生任何变化。换句话说，这个元素原来占据的空间没有动，其他元素也没动

绝对定位

绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来

绝对定位元素默认的定位上下文是body 元素，而不是相对于它在文档流中的位置偏移多远，—这一点与相对定位的元素不同。

绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的position 设定为relative 即可

固定定位

从完全移出文档流的角度说，固定定位与绝对定位类似, 但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动

若需要做弹出层，footer时，需要使用固定定位，否则页面滚动时效果会有问题