CSS的浮动与定位

##浮动与定位

浮动

浮动可以理解成向网页的元素发布一个排列命令，它常用的值是left/right/none这三种，当为left的时候，元素从左向右排成一行，当为right时，元素从右向左排成一行

当一个元素或多个元素浮动以后，这个时候，一定要注意以下几点：

1. 当浮动了元素总的宽度大于外层的宽度的时候，这个时候，它一排放不下，会折反到下面来
2. 浮动以后的元素会脱离当前的文档流（也就是我们所指漂浮在网页上面），浮动以后的元素它外层的元素高度就无法撑开了
3. 一个元素使用了浮动以后它的宽度默认就为0，但是同样可以使用width与height去设置

清除浮动的方式

当元素浮动以后，会对后面的布局有很大的影响，这个时候，我们会清除之前的浮动

所谓的清除浮动其实就是把之前漂浮起来的元素重新下去

1. 使用clear:left/right/both

   我们可以通过使用clear的属性方式来设置元素的清除浮动。如果在布局的时候，发现前面的元素浮动以后，我们可以在后面的元素上面加上clear属性来清除浮动

   如果之前是float:left那么我们就使用clear:left，如果是float:right那么就使用clear:right，如果不知道，可以直接 写clear:both

2. 根据浮动的本质现象是元素脱离文档流照成外边的元素高度为0，这个时候，我们只要重新设置外边的元素高度就可以了。但是我们又不能直接去设置外边元素的高度（因为有时候我们根本就不知道设置为多少），这个时候，我们需要使用一个css hack来解决这个问题

   overflow:hidden

3. 写一个特定的样式来清除浮动（首选）

   因为我们都知道浮动起来的元素它需要通过clear:both来进行清除，这个时候，我们可以单独的写一个CSS样式用来清除我们的浮动

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

   代码生成效果如下图

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdGGnzrm-1587354662389)(assets/1531290260104.png)]

   以下我们如果再需清除涉浮动，只需要在外边的元素上面添加一个.clearfix的样式就可以了

---

###定位

如果一个元素要使用定位，那么它必须使用position这个属性，这个属性他的属性值有四个，常用的有如下三个

相对定位relative

1. 元素相对于原来的位置在进行位置偏移
2. 元素移动以后，依然还占用之前的位置
3. 经过相对定位的元素，它相对于屏幕会向上提高一个等级
4. 相对定位没有脱离文档流
5. 相对定位的块级元素可以使用margin:auto居中(它没有脱离文档流)

.div1{
    position:relative;
    top:-20px
}

**说明：**元素向上偏移20个像素，并且保留之前的位置

绝对定位absolute

1. 绝对定位默认是以浏览器在进行定位，例如left:20px指的就是距离浏览器左边20px
2. 当一个元素进行绝对定位以后，如果它的外层元素里面的任何一层有相对定位，这个时候，他就会以这一层的元素为标准开始定位（子绝父相）
3. 绝对定位不占用原来的位置
4. 绝对定位会脱离当前的文档流
5. 一个元素进行绝对定位以后，如果它是块级元素，那么它的宽度就不再是默认的100%，而是由里面的内容进行撑开，但是，这个时候我们可以通过width与height来设置它的宽度与高度（它只是改变了元素的宽度，并没有改变元素的性质：也就是没有把元素由块级元素转行内元素）
6. 如果一个元素使用了绝对定位，那么就不能够使用margin:auto进行居中
7. 绝对定位的元素会随着浏览器滚动条的拖动而滚动

固定定位fixed

固定定位与绝对定位很像，它们都具备一定的特性

1. 一定以浏览器为标准定位
2. 一个元素采用了固定定位以后，它的宽度默认为0，最终的宽度由里面的内容来撑开，但是可以通过width与height来设置
3. 固定定位不会随着浏览器的滚动条而进行移动，但绝对定位会存在这种情况
4. 固定定位会脱离文档流
5. 固定定位不能使用margin:auto居中

静态定位static

静态定位就是position:static,这一种定位相当于清除之前的定位（一定不要用，因为根本就没用）

定位的特性

1. 一个元素经过任何一种定位（static除外）以后，它会多出一个轴出来(默认情况下，元素只有两根轴X与Y轴)，一旦有了定位的属性以后，这个时候，它会有有一个属性z-index

2. 关于子绝父相

   所谓的“子绝父相”指的是当子级元素使用绝对定位以后，父级元素要使用相对定位来拦住下来的绝对定位。

   “子绝父相”里面，父级元素不一定要使用相对定位才行，除了static以外的任何定位，我们都可以拦下绝对定位

3. 当一个元素在使用了固定定位fixed或绝对定位absolute以后，它的宽度与高度可以通过left/right/top/bottom来进行拉伸处理

---

##CSS中有那些属性会对元素的宽度照成影响

如果要对元素的宽度与高度照成影响，无非就在两个方面

width/height对宽度的影响

• 一个元素如果设置了width/height以后，就会设置元素的宽度与高度（块级元素与行内块级元素）
• padding也会对元素的宽度与高度照成影响

元素类型对宽度高度的影响

一个元素如果由块级元素(display:block)转换成了行内元素(display:inline)以后，这个时候，它的宽度就不会再是默认的100%，而是由里面的内容来进行撑开

脱流对元素宽度的影响

一个元素如果要脱流，只有两种情况

1. 浮动
2. 绝对定位，固定定位

当元素脱流以后，这个时候，它的宽度就不再是100%，而是由里面的内容进行撑开的

在这个地方，我们同样可以通过width去设置它的宽度

👉 脱流以后的元素不能使用margin:auto进行居中

弹性盒子

当一个元素的父级元素给了弹性盒子以后，里面的子元素宽度就不再是100%，而是由里面的内容去撑开的，但是仍然可以使用with去设置它的宽度