css中float，position，display，以及清除浮动的知识点

1. float: css浮动属性

定义： 指定一个元素应沿其容器的左侧或者右侧放置，也允许文本和内联元素环绕它；浮动后脱离网页正常文档流，但也保持部分的流动性（与绝对定位相反），使用float后，元素会变为块级元素。
那么文档流是什么：
文档流：文档中可显示对象在排列时所占用的位置/空间，脱离文档流指的是对象在页面中不占据位置。
float的取值：
left：元素浮动在其所在的块容器左侧
right：元素浮动在其所在的块容器右侧
none：元素不浮动
float的原理：
浮动元素使得元素脱离了文档，在页面中不占据位置；
浮动在碰到父元素的边框或者浮动元素的边框就会停止；
浮动不会重叠；
浮动只能左右放置；
浮动后块级元素会在同一行显示，行内元素可以设置宽高；
父元素没有设置宽度和高度时，宽度由内容撑开；
float的总结：
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
float的应用：
在网页中实现排版布局，比如想在一行内显示对应的标签元素，可以使用浮动属性，浮动可以将元素并排显示。
清除浮动的方式：
当元素设置float后，该元素会脱离文档流并且向左/右浮动，浮动元素会造成父元素高度塌陷；有下面5种方式清除浮动：
1. 设置父盒子的固定高度height(前提是要设置子盒子的高度)，用父盒子来包裹住子盒子；(常用用在盒子固定高度区域，比如固定的导航栏)，缺点：使用不灵活，后期不易维护。
2. 伪元素清除法：给受影响的元素添加clear属性，有三种取值，clear：left/right/both;
3. 利用overflow清除浮动：在父级元素的样式里面添加：overflow：hidden，注意这种情况父元素不能设置高度；
4. 空div法(内墙法)：在最后一个浮动的盒子后，添加一个空的块级元素(通常是div)，同时设置clear：both来清除浮动，同样父元素不能设置高度；
5. 伪对象法：对父标签添加伪类after，添加空的内容，并且使用clear：both；
常见写法：box为父元素（.box::after{ content:" "; display:block; clear: both;}）

---

2. position: css定位属性

定义： position：指定了元素的定位类型，是元素的定位机制，用于指定一个元素在文档中的定位方式，结合top、left、bottom、right属性，决定该元素的最终位置。
position的取值： static/relative/absolute/fixed，其中static和relative会占据文档流空间，会相对它在正常流中的默认位置进行偏移；absolute/fixed则会生成一个块级框，脱离文档流；
对应4种取值：
absolute：绝对定位，脱离文档流，相对于除static定位以外的第一个父元素进行定位；可以设置外边距，且不会与其他边距合并； 现象：脱离了标准文档流，不占页面中的位置；层级提高，做网页压盖效果；
fixed：绝对定位（固定定位），相对于浏览器窗口进行定位；元素的位置在屏幕滚动时不会发生改变；可以创建固定的有宽高元素的网页效果，比如固定导航栏，回到顶部按钮，小广告等。
relative：相对定位，相对于其正常位置进行定位；元素先放置在没添加定位时的位置，在不改变页面布局的前提下调整元素位置。
**static：**默认值，没有定位，元素出现在正常的流中；此时top,left,right,bottom和z-index无效；

元素使用top, bottom, right, left四个属性进行定位，需要先设定position属性，才能工作。
z-index：仅能在定位元素上有效，该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴，z-index为正数时，表示里用户更近，为负数表示离用户更远。
** position可以做的练习：
（1）下拉列表练习 （2）两张图片错开效果 （3）图片上面定位文字 （4）元素从下面出来效果 （5）照片墙

---

3. display:规定元素应该生成的框的类型

定义：定义建立布局时生成的显示框的类型，对于HTML文档，使用display不谨慎容易违反其中已定义的显示层次结构。
display的取值：none / block / inline / inline-block / table-cell / Flex
none:此元素不会被显示
block：元素显示为块级元素，会换行
inline：默认，显示内联元素，不换行
inline-block：行内块元素，结合block和inline的部分属性
table-cell：会作为一个表格单元格显示（类似&）
Flex：弹性盒模型
在页面中，行盒不换行，块盒独占一行，常见的行盒包括容器元素，h1~h6，p元素，span，strong，em，i，img，video，audio
几种隐藏的对比：
display:none，隐藏自己，隐藏后 原位置不保留
visibility:hidden，隐藏自己，隐藏后 原位置保留
opacity:0，隐藏自己，隐藏后 原位置保留
overflow:hidden，将溢出部分隐藏
原位置不保留的属性：float; position:absolute; position:fixed; display:none;

4. 其他相关的内容：

4.1 BFC（块级格式化上下文）
定义：是一个独立的渲染区域， 它规定了内部的块级盒子如何布局，同时与这个区域外部不相关。
BFC布局规则：
1.内部的盒子会在垂直方向，一个接一个放置。
2.盒子垂直方向的距离，由margin决定。属于同一个BFC的两个相邻盒子的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的其他
总结
浮动定位和清除浮动只会应用于在同一个BFC的元素，浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在他前面的元素的浮动；
总结：只要让符合子形成BFC的区域，那么它就会清除区域中浮动元素带来的影响。
4.2 盒模型
元素的内容高度、padding、border以及margin
元素的分类：块级元素、行内元素、行内块元素之间的区别
盒模型的margin，垂直方向上会出现外边距合并的问题

~~后面总结了会再继续更新