浮动

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间

float属性最初只用于在成块的文本内浮动图像，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。但是现在它已成为在网页上创建多列布局的最常用工具之一。
浮动float属性有两个值，left和right，分别是左浮动和右浮动。

浮动的例子

当三个盒子浮动时，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

浮动.PNG

当宽度不够时，放不下就会换行。

浮动2.PNG
被卡住的情况：如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
浮动3.PNG

清除浮动

使用浮动后，会出现一些问题：

• 对后续元素位置产生影响
• 父容器高度计算出问题

清除浮动：

1.应用clear属性，clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
2.使用伪元素，给包含浮动元素的容器设置 clearfix。

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

用inline-block还是浮动

• inline-block 优势: 不需要清除浮动，简单，在设置居中时更方便,适合子内容不多的元素水平排列
• inline-block 劣势: 需要注意缝隙，注意对齐，ie8以下不能用
• float优势: 兼容性好，没缝隙问题
• float劣势: 需要清除浮动，适合稍大的布局

定位

定位允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

静态定位

position: static 默认值 默认的布局方式。

相对定位

相对定位就是“相对自己定位”。

position: relative 相对默认的布局位置进行定位。可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

.box {
  position: relative;
  top:20px;
  left:30px;
}

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。z-index的值为数值，数值大的覆盖数值低的。

固定定位

position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}