布局、浮动、塌陷现象

1.关于布局

1. 分大块区域几大块内容，一行为一大块内容。比如topbar、nav、header、slider、ad、main、footer等大块区域。
   margin-bottom
2. 大块区域的真实区域，版心部分。
   width,版心宽 （可直接单独写一个类，每次用时直接引用类名）
margin: 0 auto; （使用margin:0 auto;时必须有明确的宽度）
overflow: hidden; 清除浮动 ，BFC 不影响该块区域后面的其他盒子
3. 根据内容由上及下，由左及右进行划分2或3块区域。
   padding
height
(width有的需要给宽，根据具体情况定)
overflow: hidden;
position: relative; 如果区域中有小图标用定位
4. 每块区域具体划分为左块右块，上块下块，或者几列（col1、col2、col3）。
   float
padding
margin
width
(overflow:hidden;如果是大盒子内容较多，或者有浮动用)

2.浮动

浮动宏观上看就是做“并排”的。
只要有浮动就脱标，只要脱标就不能撑高

2.1浮动的四种性质：

1.脱标
2.浮动的元素相互贴靠
3.浮动的元素有“字围”效果
4.收缩（如果一个浮动的元素没有设置宽，那么将自动收缩为字的宽度）

2.2清除浮动四种方法

2.2.1. 给父级元素设置高：（一般不用）

浮动的元素只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，并且盒子有高则浮动不会影响。但工作中我们不会给所有的盒子加高度，因为内容能撑高并且不能适应页面的快速变化。

2.2.2. 添加clear:both;（一般不用）

最简单的清除浮动的方法就是给盒子添加clear：both;表示自己的内部元素不受其他盒子的影响，但margin失效，两个div之间没有间隔了。

2.2.3.隔墙法：

在两个浮动元素之间建一个墙，即两个div盒子之间再加一个div来clear：both;hight:10px;。让后面的浮动元素不去追前面的浮动元素，墙用自己的身体当作间隙。但第一个div盒子还是没有高度。

2.2.4.内墙法：

在第一个div盒子中添加墙。例如两个p都浮动，所以div不能被撑出高，而家里面修一堵墙，就能让div被儿子撑出高了。内墙法既能隔住浮动又能撑出高度。
<div>
<p>我浮动</p>
<p>我也浮动</p>
<div class="cl"></div>
</div>

2.2.5.overflow：hidden;法（建议使用）

此方法简单但注意兼容问题。一个父亲不能被自己浮动的儿子撑出高度，只要给父亲添加overflow:hidden;那么父亲就能够被浮动的儿子撑出高度了。

2.3 BFC

一个大盒子中的三个小盒子都浮动，这个大盒子就是BFC区域，BFC盒子要添加overflow:hidden;（BFC区域里的内容无论怎么浮动、定位都和外界无关,不会影响这个大盒子之外的其他盒子）

3. z-index

只有定位(相对定位、绝对定位、固定定位)的元素才有z-index，浮动不能使用。
z-index值没有单位（默认为0），表示谁压着谁。数值大的压盖住数值小的。

4.塌陷现象

4.1标准文档流中塌陷现象：

竖直方向的margin不叠加，以较大的为准如上图所示。（塌陷）
水平方向的margin叠加。

4.2脱离标准文档流中（只要浮动就脱离标准文档流）没有塌陷现象：

垂直方向叠加
水平方向叠加

5.标签嵌套

p里不能嵌套div，可以嵌套p
a里不能嵌套a、input。其他标签都可以嵌套。