流布局概念
1.流又称文档流，是css基本定位和布局方式。流体布局是html的默认布局方式，如果你写html不写css，那么就是默认自上而下的布局方式（块级元素），从左到有（行内元素）堆砌的布局方式。
二.块级元素和内联元素
块级元素是指可以单独占一行的元素，这些元素的display值默认是block、table、list-item等。
内联元素（行内元素）是指可以在一行中并列显示的元素，这些元素的display值默认是inline、inline-block、inline-table、table-cell等。
三.width: auto 和 height: auto
width和height的默认值都是auto
width
对于块级元素，流体布局之下width:auto会自适应撑满父元素的宽度（这里的撑满不等于width：100%的固定宽度，而是根据父元素的宽度像流水一样自适应宽度。）
对于行内元素，流体布局之下父元素的宽度会由子元素的宽度来撑开。
height
流体布局之下,不管是块级元素还是行内元素，父元素的高度都会根据子元素的高度撑开(父元素不设置固定高度的前提下。如果子元素设置的固定高度比父元素设置的固定高度高，那么会以子元素的高度撑开)。
注意父元素height: auto会导致子元素height: 100%百分比失效;
正常流下，如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。这就是流体布局的根本所在。
css权重
css权重指的是样式的优先级，有两条或者多条样式作用于同一个元素，权重高的那条样式对元素起作用，权重一样的，后面的会覆盖前面的。
权重等级
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
盒模型
概念:由contentbox,，paddingbox，borderbox,marginbox由里到外构成了盒子模型
盒模型有两个标准，一个是标准盒子模型，一个是IE盒模型。两者的区别:标注盒模型的宽高是contentbox区域。IE盒模型的宽高是contentbox和paddingbox和borderbox之和的宽高和。
内联盒模型:1.不可以设置宽高 2.可以设置水平方向和垂直方向的padding 3.可以设置边框 4.支持水平外边距不支持垂直外边距（margin）
盒模型四大金刚（content，padding，border，margin）
line-height和vertical-align的介绍
https://www.cnblogs.com/cowboybusy/p/11474783.html
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
flex布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
gird布局http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
浮动
html本身自带一种布局即流式布局，流式布局就是元素从上到下，从左到右依次布局，并且块级元素独占一行，行级元素并排显示，当块级元素使用float之后会并排显示。
缺点
脱离标准流，造成父元素高度塌陷
解决方案
1.给父元素设置高度
2.给父元素设置overflow：hidden；
3.利用clear属性清除浮动
clear：left;清除左浮动；
clear：right;清除又浮动；
clear:both;清除左右浮动
使用这个属性，要求元素必须是块级的。
使用方法：(1)，在父元素里添加一个空的块级元素，
(2)、不让这个空的块级元素浮动，并给他添加clear：both；
- /* 给父元素设置一个清除浮动的类，哪里需要清除浮动只需添加这个类就行了 */
.clear:after{
clear: both;
display: block;
content: "";
}
display:inline-block 会产生的问题（两个inline-block之间有空白间隙）和解决方法
问题复现：
解决方法：1.分别给两个元素之间添加
float:left 2.父元素中设置font-size: 0，在子元素上设置需要的font-size
.father{
border: 1px solid red;
font-size: 0;
}
.son1{
background: blue;
display: inline-block;
font-size: 14px;
}
.son2{
background: gold;
display: inline-block;
font-size: 14px;
}
position
BFC
不受其他元素的影响，始终保持自己独立。就是正常的普通流布局规则，设置的样式是什么样的，就按正常的普通流布局的表现。
BFC触发条件：
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position值为绝对定位absolute或者固定定位fixed
场景
- 浮动导致父元素高度塌陷
- 避免外边距折叠
参考：https://juejin.im/post/5da282015188257d2a1c9e1d
https://juejin.im/post/5ce607a7e51d454f6f16eb3d#heading-30
