【查漏补缺】浮动、定位、外边距塌陷

1. 浮动

浮动可以让多个盒子在同一行显示，浮动在网页中布局的使用步骤
1. 利用标准流让父盒子在上下位置排列
2. 使用浮动让父盒子内的子盒子左右位置排列
3. 若浮动的盒子影响了后面标准流盒子的布局，则需要清除浮动
浮动的盒子只会影响后续标准流盒子的布局，不会影响到之前标准流和子的布局
若一个盒子设置了浮动，理论上其兄弟盒子都需要设置浮动，且浮动可以让一行内的多个兄弟盒子没有缝隙的排列
浮动的元素会脱离标准流，导致父盒子的高度为0，在父盒子不方便给高度的情况下会影响到后续标准流盒子的布局，所以设置了浮动的盒子，一般都需要清除浮动
清除浮动采用闭合元素的策略，通过clear: both;清除浮动，有四种清除浮动的方法
- 添加额外标签（W3C推荐），给这个元素设置样式clear: both;注意：这个额外的元素必须是块级元素，这种方式最大的缺点就是会影响html的结构
- 给父元素设置样式overflow: hidden;这种方式简单，但是会隐藏掉超出盒子部分的内容，慎用
- 给父元素添加::after伪元素，优点：不会改变html的结构
```
.father:after {
  content: "";
  display: block;
  height: 0;/*在content为空的情况下，删除这一行效果一样，我认为设置高度是为了防止意外在conten中添加了内容，影响到布局*/
  clear: both;
  visibility: hidden;
}
.father {
  zoom: 1; /*兼容IE6、7*/
}
```
- 给父元素添加双伪元素::bofore ::after，优点：不会改变html的结构，写法更简单
```
.father::before, .father::after {
  content: "";
  display: table;
}
.father::after {
  clear: both;
}
.father {
  zoom: 1; /*兼容IE6、7*/
}
```

2. 定位

页面中多个盒子存在层级关系就可以使用定位，定位 = 定位模式 + 边偏移
定位的5种模式

定位模式	静态定位static	相对定位relative	绝对定位absolute	固定定位fixed	粘性定位sticky
参考目标	标准流	自身原来的位置	离自身最近的第一个具有定位的祖先元素（不含static）	浏览器的可视窗口	浏览器的可视窗口
是否脱标	不脱标	不脱标	脱标	脱标	不脱标
特点	就是标准流	不会影响后面的标注流盒子	如果祖先元素都无定位则相对于浏览器可视窗口定位	定位与父元素无关；不随滚动条滚动；可以看做特殊的绝对定位	必须设置任意一个边偏移值才能生效

定位的叠放次序z-index（z-index没有单位，且只有设置了定位的元素才可以设置z-index）
- z-index的值越大，层级越高，越靠上层显示
- z-index的值相同，书写顺序越靠后，越显示在上层

3. 比较元素的浮动和定位

行内元素添加绝对/固定定位、浮动可以直接设置盒子的宽度和高度，块级元素添加绝对/固定定位、浮动如果不设置宽度和高度，盒子的大小默认为内容的大小
浮动的元素只会压住盒子，但是不会压住盒子内的文字和图片（浮动原本的功能就是用来制作文字环绕效果的）
绝对定位会压住盒子里的所有内容，包括文字和图片

4. 外边距塌陷

外边距塌陷有两种情况

嵌套关系的两个盒子，子盒子设置了margin-top，则父盒子也会被往下移动一段距离
相邻两个兄弟盒子，第一个盒子设置了margin-bottom ，第二个盒子设置了margin-top，则两个盒子在垂直方向上的距离并不是简单的两个外边距相加，两个盒子之间的距离为上边距和下边距中较大的值

出现父子盒子外边距塌陷的情况有六种解决方法，如下

	描述
方法一	给父盒子添加上边框
方法二	给父盒子添加overflow: hidden/auto;
方法三	将父盒子或子盒子设为行内块元素
方法四	将子盒子设为浮动（会影响之后盒子的布局）
方法五	子盒子使用绝对定位（会影响之后盒子的布局）
方法六	不要给子盒子设置上边距，改用给父盒子加上内边距

出现兄弟盒子外边距塌陷的情况有五种解决方案

	描述
方法一	在可能出现外边距塌陷的位置，两个盒子不要同时设置外边距
方法二	将其中一个盒子设置为行内块元素
方法三	将排列在下面的盒子设置为浮动
方法四	将排列在下面的盒子设置为绝对定位或者固定定位
方法五	给其中一个盒子添加一个父盒子，然后给这个父盒子添加overflow: hidden/auto;

行内元素为了照顾兼容性尽量只设置左右内边距，不要设置上下内边距，但是块级元素和行内块元素就可以设置上下左右的内边距
脱离标准流的盒子不会出现外边距塌陷（浮动、绝对定位、固定定位）

【查漏补缺】浮动、定位、外边距塌陷

1. 浮动

2. 定位

3. 比较元素的浮动和定位

4. 外边距塌陷

猜你喜欢