盒子高度=内容高度+填充+边框+外边距
一、浮动 1、float： 左浮动 left 右浮动 right 2、标准流 3、脱离标准流：设置浮动就脱离标准流 4、谁浮动谁下面的元素占据自己的位置 5、左浮动 （1）浮动了两个div元素div2和div3 div2--->>行内块元素没有独占一行 div3--->>紧跟在div2的右边 div4--->>紧跟在div1的下面 浮动了三个div2，div3，div4 div3、div4依次跟在上一个元素右边 （2）如果div3元素上一个元素也是浮动的，那么div3元素会跟随在上一个元素（div2）的后边(如果一行放不下这两个元素，那么div3元素会被挤到下一行)； 如果div2元素上一个元素是标准流中的元素，那么div2的相对垂直位置不会改变，也就是说div2的顶部总是和上一个元素的底部对齐。 6、右浮动 向右边浮动，两个相邻浮动跟在前一个左边
7、如果我浮动，下一个元素占据我的位置我的位置在哪里？
（1）看上一个是标准就跟在下面 （2）看上一个浮动方向一致就跟在后面 （3）看上一个浮动方向不一致就找一致或者标准，然后遵循（1）（2）的规则
就像会飞的×××，如果我没有飞，前面的×××在左侧飞起来我就在他下面跑，如果前面的×××在右侧飞，那我不受影响我就继续向前跑，看前面的左侧飞我就在他下面，看他地上跑我就跟在他后面。 如果我在左侧飞，前面×××也在左侧飞，那么空中车道已经满了，我只能跟他并肩飞并且在他右边。 如果我在右侧飞，前面×××也在右侧飞，那么空中车道已经满了，我只能跟他并肩飞并且在他左边。
8、总结： （1）粗略定位 float：left 左 float：right 右 （2）精准定位（向上找） 假设我是左浮动 上一个元素无浮动：底部对齐 上一个元素左浮动：紧跟其“后” 上一个元素右浮动：前进一步，看上一个元素的上一个元素
9、块级元素：独占一行，可以设置宽和高 此元素前后会带有换行符（block） 内联元素：设置宽和高没有作用 inline 行内块：可以设置宽和高 inline-block span设置浮动后高度宽度变的有意义 二、定位 position：relation； 默认：span 1、相对定位：relation 相对自己来说 top：垂直偏移量 left：水平偏移量 span运用这个属性依然无效 2、绝对定位：position：absolute； （1）如果前面的父（祖）都没有设置relation或者absolute属性，top和left相对于body （2）如果前面的父（祖）都设置relation或者absolute属性，则按照父（祖）元素定位
3、固定定位：position：fixed； 三.补充属性 1、z-index z-index只能在position属性值为relative或absolute或fixed的元素上有效，如两者发生重叠时，z-index的值越大，位置越往上 2、Display 块级元素：独占一行、可以设置宽和高。此元素前后会带有换行符。block 内联元素：设置宽和高没有作用 inline 行内块：没有独占一行、可以设置宽和高 inline-block 区别：行内块取其块级元素的长处，补其内联元素的短处 3、Overflow visible 默认值。内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（默认有滚动框） Auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（溢出才有滚动条） 4、Visibility visible 默认值，元素是可见的 hidden 元素是不可见的 5、Visibility与Display: Visibility：hidden；隐藏元素，但其位置空出，新元素不可覆盖其旧元素位置 Display：none；元素消失，新元素覆盖其旧元素位置
