布局
网页布局方式
标准流：块级元素独占一行（垂直布局），行内元素/行内块元素一行多个（水平布局）。
浮动：让标准流中垂直布局的块级元素变成水平布局。
定位：让元素自由的摆放在网页的任意位置，用于盒子之间的层叠情况。
浮动
浮动元素会脱离标准流（脱标），在标准流中不占位置，相当于飘到了空中，可以覆盖标准流中的元素，浮动元素之间项对齐。
浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高，相当于具备行内块的特点，浮动元素的父级元素如果宽度不够则自动换行。
设置浮动
使用属性 float 设置，属性值使用方位名词（left、right、top、bottom）。
清除浮动
子元素浮动脱离标准流后，此时在标准流中不占位置，不能撑开标准流的块级父元素。如果父元素不设置高度，就会发生高度坍塌影响后面的标准流盒子位置。
解决方法：
- 直接设置父元素高度，防止高度坍塌。
- 额外标签法：在父元素内容的最后添加一个块级元素，给这个块级元素设置属性
clear: both. - 单伪元素清除法：用伪元素替代额外标签，好处是可以使用 css 类给需要清除浮动的标签分配即可。
- 双伪元素清除法：在浮动标签前后添加伪元素，解决单伪元素清除法外边距塌陷问题。（外边距塌陷：父子标签都是块级元素，子级添加 margin 会影响父级的位置）
- 给父元素设置
overflow: hidden.
/*单伪元素清除法*/
.clearfix::after {
content: '';
display: block;
clear: both;
/* 补充，使网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
/*双伪元素清除法*/
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}定位
定位可以解决盒子之间的层叠问题，定位之后的元素层级最高，可以层叠在其他盒子之上，让盒子始终固定在屏幕中的某个位置。
定位的使用方式
使用属性 position 设置定位方式，属性值：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
然后设置偏移量，偏移量设置分为两个方向，水平和垂直各选一个使用：
- 水平方向：属性名（left、right），属性值：数值+px，含义，距离左/右边的距离。
- 垂直方向：属性名（top、bottom），属性值：数值+px，含义，距离上/下边的距离。
水平和垂直方向都不能同时设置相反的属性，如果同时存在则遵循左上原则（left、right、top、bottom 同时存在时，只有 left 和 top 属性生效）。
相对定位
相对于自己原来的位置进行移动，配合方位属性实现移动，在页面中占位置，没有脱离标准流。用于小范围的移动。
div {
position: relative;
left: 100px;
top: 200px;
}绝对定位
相对于非静态定位的父元素进行定位移动，配合定位属性实现移动，在页面中不占位置，但脱离标准流。
绝对定位就近寻找已定位的父级，以父级为参照物进行定位，逐层查找，如果父级没有定位，则以浏览器窗口为参照物进行定位。
子绝父相
子元素使用绝对定位基于该父元素定位，父元素使用相对定位防止脱标后位置被占用。
固定定位
相对于浏览器可视区域进行移动，配合方位属性实现移动，在页面中不占位置，脱离标准流，具备行内块特点。可以让盒子固定在屏幕中的某个位置。
div {
position: fixed;
left: 0;
top: 0;
}元素层级关系
布局方式元素的层级关系：标准流 < 浮动 < 定位
不同定位之间的层级关系：相对、绝对、固定默认层级相同，此时在 HTML 中后渲染的元素层级更高，覆盖先渲染的元素。（后来者居上）。
使用 属性 z-index 可以设置层级关系，必须配合定位才生效。
属性值：整数，取值越大，显示顺序越靠上。默认值为0