Css中position、float和clear整理

Position:

absolute	生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。 元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

 

float:

块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候，该元素的宽度也会随之变化。

当该元素被设为浮动时，该元素的width就变成了内容的宽度了，由内容撑开，也就是所谓的有了包裹性。overflow | position:absolute | float:left/right均可以产生包裹性，替换元素也一样具备包裹性。

在具备包裹性的元素上想利用width : auto；来让元素宽度自适应浏览器宽是不行的。

元素浮动后，父元素会塌陷此时可使用clear来清除浮动，让父元素就会包含它中间的浮动元素了

参考：CSS浮动

clear:

CSS clear属性指定：一个元素是紧挨着前面的浮动元素，仍是必须移动到它们的下面（浮动被清除）。
clear属性既能够用于浮动元素，也能够用于非浮动元素。

当应用于非浮动块时，它将元素的边框边界移动到全部相关浮动元素外边界的下方。这个行为做用时会致使外边距折叠不起做用。

当应用于浮动元素时，它将元素的外边界移动到全部相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置没法高于它以前的元素。

要被清除的相关浮动元素指 在相同块级格式化上下文中的前置浮动。

注释:若是你想要一个元素将全部浮动元素包含在内，你既能够将这个容器设置为浮动，又能够经过 ::after 伪元素设置clear属性做为替代。

#container:after {
 content: "";
 display: block;
 clear: both;
}

clear的方式有2种， 一种是使用伪类，另一种是使用一个clear的元素，这样外面的元素就会包含它中间的浮动元素了。

外边距合并:

外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

参考： CSS 外边距合并

参考文章:

这多是史上最全的CSS自适应布局总结

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

http://sonspring.com/journal/clearing-floats

http://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/