一.浮动
简介：一开始是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一
float
元素浮动后的特点：
1.脱离文档流（好比新建一个图层）
2.无论浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
3.不会独占一行，可以与其他元素共用一行
4.不会margin合并 ，margin塌陷，能够完美的设置四个方向的margin和padding
5.不会像行内块一样被当作文本处理（没有行内块的空白问题，即紧贴）
浮动后的影响：
1.对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的后面；对前面的兄弟无影响
2.对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依旧束缚浮动的元素
解决浮动后的影响（注：行内块元素会环绕浮动元素；’ '为空内容）
<head> <style> .outer{ width: 500px; background-color: gray; border: 1px solid black; /* 方案一：父元素加高 */ /* height: 122px; */ /* 方案二：父元素浮空 */ /* float: left; */ /* 方案三：处理内容溢出，overflow */ /* overflow: hidden; */ } .box{ width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; margin: 10px; } .box1,.box2,.box3,.box4{ float:left } /* .magic{ */ /* 方案四：运用clear */ /* clear: both; */ /* } */ /* 方案五 */ .outer::after{ content: ''; display: block; clear: both; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <!-- <div class="magic"></div> --> </div> </body>布局中的一个原则：设置浮动的时候，兄弟元素要么是全部浮动，要么全都不浮动
在一开始最好在style中写上以下代码来清除body的默认样式
*{ margin: 0; padding: 0; } 准备： .leftfix{ float: left; } .rightfix{ float: right; } .clearfix::after{ content: ''; display: block; clear: both; }二.定位
相对定位：相对自己原来的位置
position: relative; left/right/top/bottom: 200px;绝对定位：参考它的包含块
包含块：
（1）对于没有脱离文档流的元素：包含块就是父元素；
（2）对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素，否则为整个页面
position: absolute; left/right/top/bottom: 200px;固定定位：参考它的视口（网页的“窗户”）
position: fixed; left/right/top/bottom: 200px;粘性定位：
参考点：离他最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先
position: sticky; left/right/top(最常用)/bottom: 0px; /*设置滚动条的方法，height小于子元素*/ height: 100px; overfolw: auto;定位的层级
（1）定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
（2）如果位置发生重叠，默认情况是：后面的元素会显示在前面的元素之上
（3）可以通过z-index调整元素显示层级，属性值为数字，无单位，值越大显示层级越高
（4）只有定位的元素设置z-index才有效
（5）若z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级
注：定位可以越过padding
定位的特殊运用**(只针对绝对定位和固定定位)**
运用1：让定位元素的宽充满包含块
1.块宽想与包含块一致，可以给定位元素同时设置left和right为0
2.高度想与包含块一致，top和bottom设置为0
运用2：让定位元素在包含块居中（该定位元素必须设置高与宽）布局
方案一： left: 0; right: 0; top: 0; bottom: 0; margin: auto; 方案二： left: 50%; top: 50%; margin-left: 负的宽度的一半; margin-top: 负的高度的一半;布局
（一）版心
在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
版心的宽度一般是960~1200px之间，版心可以是一个，也可以是多个
（二）常用布局名词
三）重置默认样式
默认样式详细内容看55.盒子模型（十三）元素的默认样式
方案一：使用全局选择器
*{ margin: 0; padding: 0; ...... }方案二：reset.css
选择到具有默认样式的元素，清空其默认的样式
方案三：Normalize.css
最新方案，在清空默认样式的基础上，保留了一些有价值的默认样式
官网：http ://necolas.github.io/normalize.css/
