浮动特点

块级元素同行显示
（1） display:inline-block;中间存在5px的间距，存在兼容问题。
（2）浮动。

浮动

可以让元素同行显示，排列不下自动换行。
语法：

float:left | right | none;
left:左浮动
right:右浮动
none:不浮动，默认值

特点：
（1）浮动元素可以同行显示，排列不下会自动换行，不存在兼容问题。
（2）浮动元素会脱离文档流，在标准文档流之上。
（3）原来的空间不存在。
（4）行内元素设置浮动后，支持宽高。
注意：
（1）只有设置了浮动的元素，才可以同行显示。
（2）多个元素同时浮动，第一个浮动元素找父盒子的边界，后面的浮动元素找前面浮动元素的边界。
（3）块级元素设置浮动后，如果不设置width，默认是auto，宽度是由内容决定的。

标准文档流

概念：在页面布局过程中，元素按照从左到右，从上到下，块级元素独占一行，行级元素共享一行的排列规范。

脱离文档流

概念：在页面布局过程中，元素不再遵循标准文档流，按照自己的排列规范来排列。

浮动对非浮动的影响

（1）非浮动元素会占用浮动元素原来的位置。
（2）非浮动元素里面的文本会被浮动元素挤出来。

实现图文混排

子元素浮动，父元素高度塌陷。

清除浮动

通过clear属性来清除浮动，清除浮动元素对非浮动元素的影响。
语法：

clear:left | right | both;
left:清除左浮动的影响
right:清除右浮动的影响
both:清除左浮动和右浮动的影响

清除浮动的方法

（1）给受影响的元素添加clear属性。
（2）使用 br class="all" 进行浮动元素和非浮动元素的隔开。
（3）使用空白的div添加clear样式将浮动元素和非浮动元素隔开。

<div style="clear:both"></div>

（4）给父元素添加伪元素选择器来清除浮动（推荐）。

.clearfix::after {
                   content:"";
                   clear:both;
                   display:block;
                   }

注意：overflow:hidden可以解决子元素浮动，父元素高度塌陷的问题。是取消浮动的影响，借助BFC容器的特点，这个容器里面的浮动元素会参与父盒子的高度计算。

定位介绍

如何让盒子移动到指定的位置

margin负值

标准文档流：在页面布局过程中，元素从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范。
破坏文档流：在页面布局过程中，元素在移动过程中不遵循标准文档流的规范，移动完成之后仍然在标准文档流中。
脱离文档流：在页面布局过程中，元素不再遵循标准文档流的规范，有自己的排列规范。
应用场景：头部的内容和banner重叠部分。

定位（让元素移动到指定的位置）

静态定位

概念：默认每个标签都是静态定位。
语法：

position:static;

相对定位

概念：元素参考原来的位置，按照指定的方向进行移动。
语法：

position:relative;
top:元素距离参考位置的上边缘的间距
bottom:元素距离参考位置的下边缘的间距
left:元素距离参考位置的左边缘的间距
right:元素距离参考位置的右边缘的间距

特点：
（1）设置相对定位的元素会破坏文档流进行移动。
（2）只设置相对定位，元素不会有变化，一旦设置偏移量，破坏文档流参考元素原来的位置进行移动。
（3）原来的空间还占用。
注意：
（1）子元素设置相对定位，父元素进行移动时，子元素跟着移动，原因在于子元素原来的位置进行了移动，相对定位的元素是参考元素原来的位置进行移动，所以跟着移动。
（2）一般配合绝对定位一起使用。

绝对定位

元素会脱离文档流，按照指定的位置进行移动。
语法：

position:absolute;
top:元素距离参考位置的上边缘的间距
bottom:元素距离参考位置的下边缘的间距
left:元素距离参考位置的左边缘的间距
right:元素距离参考位置的右边缘的间距

特点：
（1）设置绝对定位的元素会脱离文档流。
（2）只设置绝对定位，元素是在当前位置脱离文档流，一旦设置了偏移量，元素默认参考整个文档进行移动。如果设置了定位父级，参考最近的定位父级进行移动。
（3）原来的空间不再占用。
注意：行内元素设置绝对定位后，元素支持宽高。

固定定位

元素会脱离文档流，按照指定的位置进行移动，会固定在页面上，不会随着滚动条滚动。
语法：

position:fixed;
top:元素距离参考位置的上边缘的间距
bottom:元素距离参考位置的下边缘的间距
left:元素距离参考位置的左边缘的间距
right:元素距离参考位置的右边缘的间距

应用场景：头部导航固定、小广告、登录弹出框等。
特点：
（1）固定定位的元素会脱离文档流，在标准文档流之上。
（2）会固定在页面上，不会随着滚动条滚动。
（3）只设置固定定位，当前位置脱离固定在页面上，如果设置了偏移量，参考整个文档进行移动，固定在页面上。
（4）原来的空间不再占用。

定位父级

结构父级：子元素在html代码中结构上的父标签。
定位父级：设置的绝对定位的元素进行移动时的参考位置，默认按照整个文档进行移动，一旦父元素设置相对定位、绝对定位、固定定位后，参考最近的定位父级进行移动。
注意：定位父级可以使用相对定位、绝对定位、固定定位，一般使用相对定位。如果设置了多个定位父级，参考最近的定位父级进行移动。（子绝父相）

定位层级

概念：设置的元素定位层级，只针对于相对定位、绝对定位、固定定位有效。
语法：

z-index:数字;
auto:默认值，相当于0，标准文档流里面的元素相当于0；
数字：设置堆叠顺序。

注意：数字越大，定位层级越高，数字相同时，按照代码结构后面定位的元素显示在前面定位元素的上方。

盒子居中技巧

margin:auto auto;
可以让元素水平居中，但无法垂直居中，auto是一个值，自适应，浏览器自动计算得出值，一般垂直方向内容撑开，高度是在变化的，垂直方向上auto禁用。

方案一

通过margin自动计算
给大盒子设置相对定位，作为定位父级；
给小盒子设置绝对定位

top:0;
bottom:0;
left:0;
right:0;
margin:auto;

方案二

通过绝对定位设置clac函数进行计算
给大盒子设置相对定位
给小盒子设置绝对定位

top:calc(50%-小盒子高度的一半)
left:calc(50%-小盒子宽度的一半)

方案三

通过margin使用calc函数进行计算
给小盒子设置

margin-top:calc(50%-小盒子高度的一半)
margin-left:calc(50%-小盒子宽度的一半)

注意：这种方案只适用于大盒子宽高一致。
margin和padding设置百分比时，无论哪个方向，都是参考父元素的宽度。