浏览器默认的布局方式是标准流（文档流/普通流）。
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版 。
垂直排版, 如果元素是块级元素, 那么就会垂直排版 ；
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版 。
给元素设置float:left/right;样式会使得元素脱离标准流进入浮动流布局。
.浮动流是一种"半脱离标准流"的排版方式
浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
浮动元素字围现象
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置
浮动元素的特点：
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的 无论是块级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
浮动流中的高度塌陷问题：
由于在标准流中的父容器是由内容子元素来撑起高度的，当子元素进入浮动脱离标准流，父容器将无法被撑起保持原来的height，导致高度塌陷。
解决办法：
1.将父容器高度写死（不灵活）
2.通过父元素的伪类添加最后一个空白div元素，并清除浮动
.father::after {
content: '';
display: block;
clear: both;
}3.给父容器开启BFC（overflow:hidden）
BFC(块级格式化上下文）
它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局
BFC的布局规则
-
内部的Box会在垂直方向一个接着一个地放置。
-
Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
-
每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
-
BFC的区域不会与float box重叠。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
-
计算BFC的高度时，浮动子元素也参与计算。
哪些元素会生成BFC
1.根元素
2.float属性不为none
3.position 为absolute或fixed
4.display为inline-block table-cell table-caption flex inline-flex
5.overflow不为visible
通过BFC解决父元素高度塌陷的原理：计算BFC的高度时，浮动子元素也参与计算
子元素已经脱离标准流，要使父元素和子元素一起参与计算共用一套规则，只能给没有脱离标准流的父容器开启BFC。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 父元素 */
.div1 {
width: 1000px;
border: 10px solid red;
/* BFC */
overflow: hidden;
}
/* 子元素 */
.div2 {
width: 200px;
height: 400px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>定位流
1.定位布局
- 定位流分类
1.1.静态定位
1.2.相对定位
1.3.绝对定位
1.4.固定定位
1.5.粘滞定位
1.6.z-index
- 1.1.静态定位（ Static positioning）
是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。
position: static;
- 1.2.相对定位（ Relative positioning ）
相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使用top,right,bottom,left来控制
- 相对定位注意点
-
相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
-
在相对定位中同一个方向上的定位属性只能使用一个
-
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
-
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局
- 相对定位应用场景
-
用于对元素进行微调
-
配合绝对定位来使用
- 1.3.绝对定位（Absolute positioning）
绝对定位就是相对于body来定位 position: absolute;
- 绝对定位参考点
1.规律 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。 2.1只要是这个绝对定位元素的祖先元素都可以 2.2指的定位流是指绝对定位/相对定位/固定定位 2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
-绝对定位注意点
1.绝对定位的元素是脱离标准流的 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素 3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点 4.一个绝对定位的元素会忽略祖先元素的padding
- 绝对定位-子绝父相
相对定位弊端: 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化 子绝父相 子元素用绝对定位, 父元素用相对定位
-绝对定位水平居中
只需要设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
垂直居中同理，属性换成top即可。
- 1.4.固定定位（Fixed positioning）
1.position: fixed; 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。
注意点: 1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
- 1.5.粘滞定位（ Sticky positioning ）
position: sticky;
结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。
亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上
移动（此时相当于fixed定位）。
设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可
使用条件：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
- 1.6.z-index
1.什么是z-index属性? 默认情况下所有的元素都有一个默认的z-index属性, 取值是0. z-index属性的作用是专门用于控制定位流元素的覆盖关系的
2.默认情况下定位流的元素会盖住标准流的元素 3.默认情况下定位流的元素后面编写的会盖住前面编写的 4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面 注意点: 1.从父现象 1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。