了解HTML浮动与定位

浮动

先了解文档流和文本流。

文档流：正常网页标签排列的顺序是从上到下，叫普通文档流

文本流：正常网页标签内容（文本）排列的顺序是从左往右排列

对于浮动来说，会使正常的标签会脱离普通文档流

左浮动 float:left;

左浮动会使标签脱离普通文档流

右浮动 float:right;

右浮动会使标签即脱离文档流又脱离文本流

浮动会带来的问题

1.布局错乱，会造成覆盖问题

2.父级边框塌陷

解决浮动带来的问题就要清除浮动

有4个方式(常用4，3)：

1.给父元素加高

2.使用overflow：hidden；

3.在浮动元素后加一个空元素，空元素的样式设置为clear：both

4.给父元素加伪类选择器

父元素名::after{ content: " ";

                          display:block;

                          clear:both;}

定位

关键字：position

相对定位  position:relative

相对定位是相对于自己进行的定位

绝对定位   position：absolute

绝对定位是相对于整个窗口进行定位的

对于偏移量（上下左右）来说，如果都等于0，相对定位是不会动的，因为相对于的是它自己

所以定位都会是当前标签（内容）脱离普通文档流

使用相对定位+绝对定位首先在父元素加绝对定位然后在子元素加绝对定位，子元素中的绝对定位是按照父元素来偏移的

固定定位    fixed

固定定位效果是会固定在网页当中的某个地方不动，不会跟着滚动条所动

固定定位的偏移量是根据网页（窗口）进行变化的

粘性定位  position:sticky

当当前条件被达到时，会出现某个标签，然后固定在网页的某个位置不动

如果要使用z-index时必须是使用了定位

z-index 会改变堆叠顺序

z-index 默认是0，如果要改变，往前显示大于0，往后显示小于0。