清除浮动

清除浮动的本质

• 在标准流的布局中，很多时候父元素是不会设置高度的，直接由子元素来撑开高度。但是当你设置浮动后，因为子元素脱标了，所以不会再撑开父元素的高度，这样下面的标准流就顶上来影响布局。
• 在之前学习的布局中我们的做法是直接给父元素写死高度，让它有一个占位，但是实际工作中有些地方是不能设置高度的，那怎么解决浮动不占位的问题呢？答案就是清除浮动。

清除浮动方法

• 清除浮动其实也可以叫做闭合浮动，它的核心原理就是，在父元素最后插入一个小盒子，在父元素里把浮动的元素闭合起来，并告诉父盒子清除浮动。这样设置了清除浮动后，父元素就会自动检测浮动子元素的高度，不用专门给父元素设置高度了。格式如下：
  选择器：{clear:left|right|both}
• 对应的就是左边，右边，两边清除浮动，其中最常用的是both

额外标签法

• 就是在盒子的最后加一个空标签（div，br，p等等），并给该标签设置清除浮动。但是这种方法很早的时候会用，现在用得很少了，也不推荐使用。

overflow清除浮动

• 语法： overflow:hidden|auto|scroll
• 给父元素设置。使用overflow会触发BFC方式（后面会讲），从而达到清除浮动的效果，三个属性值随意写一个都能达到效果。这个方法有一定的弊端，建议谨慎使用。

after伪元素清除浮动

• 语法：
  .clearfix:after {
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
• 解释：clearfix是一个通用的清除浮动类名，写好之后只需要调用这个类名到标签中即可。大概原理就是：在元素内的最后插入一个元素（不用再html结构中写），放入一个最简单的内容（空也是可以的），转换为块级元素，清除浮动，高度设为0，并隐藏这个块级元素的内容。
• 下面的一个是专门给ie6和ie7用的，因为它们不认识伪元素。*是只有ie6和ie7识别。
• 这个方法是现在应用得比较多的一种方法。

after伪元素空余字符法

• 语法：
  .clearfix:after {
content:'\200B|\0200';
display:block;
clear:both;
height:0;
}
.clearfix {
*zoom:1;
}
• 原理和上一个是一样的，只是写法做了一些优化。在插入元素后，不给它设置值而是放入\200B或者\0200（零宽度空格）。因为是空的内容所以就不用在设置visibility:hidden来隐藏内容了，节省了一点代码量。

双伪元素清除法

• 语法：
  clearfix:before, clearfix:after {
content:"";
display:table;
}
clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
• 这个方法的意思，给父元素一前一后插入一个元素，完全把里面浮动的盒子闭合起来，并在设置清除浮动。至于为什么要转换为table元素，现在还不能理解。强烈推荐使用这种方法来清除浮动。

定位

什么是定位

• 定位在页面布局中常用于盒子与盒子之间的层叠关系。比如，你想一个盒子压在另一个盒子上面来做一个立体效果的展示，这种效果使用标准流和浮动几乎是不可能实现的，只有定位才能胜任，并且js也和定位配合的最多。

定位的组成

• 定位是由边偏移和定位属性来配合使用的。并且边偏移只能应用在定位中。

边偏移

• 格式：top|bottom|left|right
• 看名字就能理解，边偏移就是与上下左右四条边的距离，可以设置数值，也可以设置百分比。

静态定位

• 格式：position:static
• 其实静态定位就是标准流的特性，让每个元素都按照顺序从上至下从左到右依次来显示。设置了静态定位后，边偏移就没有效果了。所以一般静态定位使用取消的定位的。

相对定位

• 格式：postition:relative
• 相对定位的两个重要特性：
  • 它是基于自己本身的位置来做移动的
  • 他依然属于标准流，虽然移动了位置，但是原来的占位还是会保留
• 所以，它后面的盒子不会受到影响。

绝对定位

• 格式：position:absolute;
• 绝对定位的四个重要特性：
  • 它是基于父元素的位置来进行移动的，如果父元素没有设置定位，那么会基于浏览器的可视区来移动
  • 它是完全脱标的，当移动后原来的位置就不再占位了
  • 它移动完毕后，会固定位置，随着页面的滚动而滚动。
  • 如果设置了绝对定位却不是边偏移，那么它首先会脱标，然后以标准流的显示方式，与上一个盒子的底边线对齐。
  • 一般来说想要实现一个盒子在另一个盒子上，都是用绝对定位，因为它不占位置。

子绝父相的原理

• 子绝父相是在网页布局经常用到的一种方法，就是子元素使用绝对定位，父元素使用相对定位。为什么要这么做呢？
  • 首先要确定一点，如果子元素要使用绝对定位，那么父元素也是必须要使用定位的，不然子元素就会以浏览器来移动了。
    然后父亲定位的方式，首先排除静态定位，因为静态定位就是不定位，根本不考虑。
    其次固定定位，因为固定定位不会随着页面滚动而滚动，这不符合正常布局理念，所以也排除。
    最后就剩绝对定位和相对定位了，正常情况下网页都是以标准流的方式来显示的，所以一个盒子它上下都会有盒子。当父元素也是用绝对定位，那么它也不占位置了，就会影响下面的盒子，这也是不符合要求的。
    相对定位才能占位置，所以最后也是最佳的选择就是父元素使用相对定位，这也就是子绝父相的由来。

让绝对定位的盒子垂直水平居中

• 因为绝对定位的盒子是脱标的，所以不能使用margin:0 auto;来实现水平居中，更不论垂直居中了。所以要让绝对定位的盒子垂直水平居中就要使用另一种方法：
  • 水平居中：先给盒子设置left:50%的左偏移，这样盒子的左边线就对齐父盒子的水平居中线，然后再让盒子往左走自身一半的距离，就实现了水平居中。给盒子设置margin-left:自身一半的负值，就能让盒子往左走自身的一半距离。
  • 垂直居中：同理，先给盒子设置top:50%的上偏移，让盒子的上边框对齐垂直居中想，然后再让盒子往上走自身一半的距离，就实现了垂直居中。给盒子设置margin-top:自身一半的负值，就能让盒子往上走自身的一半距离。