布局是什么？
确定内容大小和位置的算法。依据元素、容器、兄弟节点和内容等信息进行计算，通过浮动、定位、弹性盒子布局、网格布局等技术来实现。
浮动 float 属性：
| 属性值 | 描述 |
|---|---|
| none | 表示不浮动，HTML 标签默认不浮动 |
| left | 左浮动 |
| right | 右浮动 |
| inherit | 继承父元素的浮动属性 |
如果对盒子设置了浮动
- 浮动的元素会脱离了标准文档流（元素排版布局过程中，元素会默认自动从左往后，从上往下的流式排列方式），即脱标
- 浮动的元素互相贴靠
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
- 浮动的元素会产生“字围”效果
- 浮动元素有收缩效果
应用场景：为了实现网页中的排版布局，如一行内显示对应标签元素，使用浮动属性可以实现元素并排。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flaot高度塌陷</title>
<style type="text/css">
.father{
border: 3px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="child">儿子</div>
</div>
</body>
</html>
设置float前：
设置float后：
对比设置 float 前后的变化，发现子盒子因为脱离了标准文档流，导致撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现这个问题，会导致整个网页布局紊乱。 总结：浮动能网页实现排版布局，但是同样也会给网页带来一定的问题(父盒子高度塌陷)，只要我们解决了浮动给网页带来的问题，就能对网页进行高效的排版布局。
解决方法：
- 父盒子设置固定高度
- 内墙法
- 伪元素清除法
- overflow:hidden
父盒子设置固定高度
应用：网页中盒子固定高度区域，如头部导航栏
缺点：灵活性和可维护性不高
内墙法
即在浮动元素的后面加一个空的块级元素(通常是 div),并给该元素设置 clear:both 属性。
clear 属性，字面意思就是清除，那么 both,就是清除浮动元素对盒子左右两边的影响。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解决高度塌陷</title>
<style type="text/css">
.father{
border: 3px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: gray;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child">儿子</div>
<div class="clearfix"></div>
</div>
</body>
</html>
应用：实际运用中很少用到 缺点：相较于 overflow 结构更冗杂
overflow:hidden
定义一个元素的内容太大而无法适应盒子的时候该做什么。它是 overflow-x 和 overflow-y 的简写属性
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容不可见 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余内容 |
| auto | 由浏览器定夺，如果内容被修剪，就会显示滚动条 |
| inherit | 规定从父元素继承 overflow 属性的值 |
当一个元素设置了 overflow:hidden|auto|scroll 属性之后，它会形成一个 BFC 区域，我们叫做它为块级格式化上下文。BFC 只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个 BFC 的元素。浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。
只要我们让父盒子形成 BFC 的区域，那么它就会清除区域中浮动元素带来的影响。
BFC：块级格式化上下文
（1）B: BOX 即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block 三种类型的 BOX
（2）FC: Formatting Context 是 W3C 的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的 Formatting Context 有 Block fomatting context (简称 BFC)和 Inline formatting context (简称 IFC)
BFC 布局规则：
1.内部的 Box 会在垂直方向，一个接一个地放置。
2.Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
3.每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC 的区域不会与 float 元素重叠。
5.BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算 BFC 的高度时，浮动元素也参与计算
会生成 BFC 的元素：
1.根元素
2.float 属性不为 none
3.position 为 absolute 或 fixed
4.display 为 inline-block
5.overflow 不为 visible
伪元素清除
用伪元素选择器设置样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解决高度塌陷</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: grey;
}
.cleafix:after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">儿子</div>
</div>
</body>
</html>
其中，使用伪元素选择器的部分：
- content:'.';元素::after{}一定要有 content。表示在元素内部的最后面的添加内容。表示给.clearfix 元素内部最后添加一个内容，该内容为行内元素。
- display:block;设置该元素为块级元素，符合内墙法的需求。
- clear:both；清除浮动的方法。必须要写
- overflow:hidden;height:0;如果用 display:none;,那么就不能满足该元素是块级元素了。
overflow:hidden;表示隐藏元素，与 display:none;不同的是，前者隐藏元素，该元素占位置，而后者不占位置。
定位 position 属性
| 属性值 | 描述 |
|---|---|
| static | 默认。静态定位， 指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 |
| relative | 相对定位。 元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白） |
| absolute | 绝对定位。不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并 |
| fixed | 固定定位。 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变 |
静态定位
元素默认显示文档流位置，无任何变化。
相对定位
元素是在文档中正常位置的偏移，但不会影响其他元素的偏移。元素没有脱离文档流。
注：偏移的盒子会移动到它设置的相反方向，比如设置
left:50px;top:10px;
则是向右偏移50px，向下偏移10px
应用：相对定位的盒子，一般用于子绝对父相对的布局模式。（父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。）
绝对定位
绝对定位的元素脱离了文档流。在标准文档流中，如果一个盒子设置了绝对定位，那么该元素不占据空间。并且绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于根元素页面的左上角进行定位。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
div{
width: 200px;
height: 300px;
border: 3px solid #ff6700;
}
.box1{
position: absolute;
left: 50px;
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</body>
</html>
效果：
固定定位
绝对定位固定元素是相对于html根元素或其最近的定位祖先元素，而固定定位固定元素则是相对于浏览器视口本身。这意味着你可以创建固定的有用的网页效果，比如固定导航栏、回到顶部按钮，小广告等。
