浮动清除与定位

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

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

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

浮动元素脱离了常规文档流以后，原来紧跟其后的元素就会在空间容许的状况下，向上提高到与浮动元素分庭抗礼。用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时，须要使用固定定位，不然页面滚动时效果会有问题