【CSS】定位与浮动这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战定位 01. 定位模式+定位偏移定位

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

定位

01. 定位模式+定位偏移

定位模式：static、absolute、relative、fixed
定位偏移：top、bottom、left、ri5ght
行内元素设置**【绝对|固定】**定位，可以直接设置高度、宽度
块级元素设置**【绝对|固定】**定位，如果不给宽度和高度，默认为内容大小
脱离文档流的元素都不会触发外边距塌陷的问题

02. 定位分为哪几类？

（1）静态定位——static（默认值）

（2）相对定位——relative

相对原来位置定位
- 以元素自身在文档流中的原来位置进行偏移
保留原来位置
- 元素相对定位后，元素原来的位置仍然存在于文档流中

（3）绝对定位——absolute

相对祖先元素定位
- 从父元素开始，向上级找到最近的一个，已经定位的（不是static定位），祖先元素，进行偏移，一直到浏览器
脱离文档流
- 不占有原来位置

（4）固定定位——fixed

【如何定位？】
- 以浏览器的可视窗口为基准进行定位偏移
【注意】因为这个原因，所以在移动端定位时，要手动限制其宽度，使用min-width,max-width
- 跟父元素没有任何关系
不随滚动条滚动
- 脱离文档流，不占有原来位置
一种特殊的绝对定位
如何固定在版心（主体内容区域）右侧位置
- 1.先偏移设置浏览器宽度的一半：left:50%
- 2.再利用【margin】偏移版心宽度的一半：margin-left:100px

（5）粘性定位——sticky

1.具有相对定位和绝对定位的混合特性

2.以浏览器的可视窗口为基准进行定位偏移

3.占有原先的位置，不脱离文档流

4.必须添加定位偏移：top、bottom、left、right

5.但兼容性差

03. 子绝父相是什么？

用相对定位来作为绝对定位的父元素
父元素相对定位，子元素绝对定位
相对定位是为了限制绝对定位

浮动

01.浮动的特性

浮动元素会脱离文档流（标准流）
浮动元素会显示在一行，除非父元素装不下
浮动元素具有行内块元素的特性（可设置宽、高等样式）

02.如何清除浮动？

为何要清除浮动？
- 清除浮动的一种方式是给父元素设置固定高度，但是由于父元素高度不是固定的，不能每次都给父元素设置高度
- 所以要清除浮动，即清除浮动元素脱离文档流造成的影响，否则会影响后面元素的布局

清除浮动的方法——闭合浮动

额外标签法——隔墙法
在最后一个浮动子元素之后添加一个空的【div标签】（或者其它块级元素，且必须是块级元素）设置样式【clear:both;】
```
div.last{
    clear:both;
}
```
父元素overflow
- 为浮动元素的父元素设置样式
```
.father{
    overflow:hidden;
}
```

:after伪元素

为浮动元素的父元素添加after伪类

添加伪元素的原理同额外标签法一样，都是在父元素末尾添加了一个块级元素清除浮动，只是新增的标签由CSS生成

/*这句代码的意思是：在父元素内部的末尾新增一个行内元素*/
.clearfix:after{
    /*必要属性content，这里设置为空即可*/
    content: "";
    
    /*用display将新增的行内元素变为块元素*/
    display: block;
    
    /*设置该伪元素高度为0*/
    height: 0;
    
    /*给这个伪元素清除浮动*/
    clear: both;
    
    /*设置该伪元素不可见*/
    visibility: hidden;
}

/*这是为了解决浏览器兼容问题*/
.clearfix{
    *zoom:1;
}

双伪元素

同 after 伪元素，新增 before 伪元素

.clearfix:before, .clearfix:after{
   content: "";
   display: table;
}

.clearfix:after{
  clear:both;
}

.clearfix{
  *zoom:1;
}

03.浮动的网页布局如何搭配？

通常与文档流里的父元素搭配使用
- 父元素处于正常的文档流中
子元素在父元素中进行浮动
- 最后在父元素中清除浮动

04.一些注意事项

浮动的盒子没有BFC，即外边距塌陷的问题
浮动的元素会压住下面文档流内的盒子，但不会压住文档流内的文字这是因为浮动原来就是为了做文字环绕效果的

~~本人前端小菜鸡，如有不对请谅解~~