2018.6.13

今天完成的事情:

1.css中的定位属性

2.清除浮动的方法

明天计划的事情:

1.BFC

遇到的问题:

无

收获:

position的五个属性值relative,absolute,static,fixed,sticky

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

页面中的块级元素：按照从上到下的方式逐个排列 

页面中的行内元素：按照从左到右的方式逐个排列 

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位（因此会在其正常位置留下空白）。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，不为元素预留空间，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。可通过z-index进行层次分级。

3.1、脱离文档流-不占据页面空间 

3.2、通过偏移属性固定元素位置 

3.3、相对于 最近的已定位的祖先元素实现位置固定 

3.4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定 

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform  属性非 none 时，容器由浏览器窗口改为该祖先。可通过z-index进行层次分级。

5、实验性API---sticky(粘性定位)：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

如何清除浮动带来的影响

1.给浮动元素的祖先元素加高度——只适合固定高度布局。

div设置一个正确的合适的高度（至少保证高度大于儿子的高度）

总结：

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就能清除浮动带来的影响了。

2.clear:both;

clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个问题，它所在的标签，margin属性失效了

margin失效的本质原因是：上图中的两个div，高度为零。

3.给父元素设定浮动——对后续元素会有影响

4.给父元素设置overflow属性——如果有内容要溢出显示(弹出菜单)，也会被一同隐藏

5.使用内容生成的方式清除浮动

:after 选择器向选定的元素之后插入内容 

content:""; 生成内容为空 

display: block; 生成的元素以块级元素显示, 

clear:both; 清除前面元素浮动带来的影响 

相对于空标签闭合浮动的方法