float

文本和内联元素环绕它，被移除正常文档流

示例

清除浮动

原因

浮动元素会造成父容器高度坍塌，因此要清除浮动。

方法

1. overflow: hidden;
2. :after

原理：在元素内部插入块，从而达到清除浮动的效果。

.clearfix:after {
    content: '';
    clear: both;
    display: block;
}

3 overflow: auto; 4 添加一个块

<div class="clear"></div>

.clear {
    clear: both;
}

示例

Position定位

position示例

静态定位

默认布局方式，元素在文档流中当前布局的位置。

top、right、bottom、left、z-index属性无效。 即无定位，遵循正常文档流。

position: static;

相对定位

不改变布局前提下，调整元素位置。相对自己定位

position: relative;

绝对定位

元素会被移出正常文档流，并不为元素预留空间。相对于最近的非static定位祖先元素定位。

绝对定位元素可以设置外边距，且不会合并。

position: aboslute;

固定定位

元素会被移出正常文档流，并不为元素预留空间，相对窗口位置定位。

常用于滚动屏幕时仍固定在相同位置的元素。

position: fixed;

粘性定位

示例

相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。

适合用作导航的布局，可惜了这个属性的兼容不太行。