CSS浮动定位

浮动

浮动float

通过浮动可以使一个元素向其父元素的左侧或者右侧移动

使用float属性来设置元素的浮动

可选值：none默认值，元素不浮动

left 元素向左浮动

right元素向右浮动

注 意 1.元素设置浮动后，会脱离文档流，不再占用文档流位置，元素下边的位置还在文档流的元素会自动向上移动

2.浮动元素不会脱离父元素从中移出

3.浮动元素在向左或向右移动时，他不会超过其他浮动元素

4.浮动元素上边的元素是一个没有浮动的块元素，则浮动元素无法上移

5.浮动元素不会超过他上边的浮动的兄弟元素，最多和他一样高

6.浮动元素不会盖住文字，文字会自动环绕在浮动元素周围

脱离文档流后，元素的特点会发生变化，块元素不再独占一行，高度和宽度默认被内容撑开，行内元素可以设置宽高，特点和块元素一样，ps：脱离文档流后，就不需要区分块或行内元素了

高度塌陷

高度塌陷问题：网页布局时，我们常不设置父元素高度，想利用子元素内容高度将父元素高度撑开，防止留白过多或是内容溢出，但是在浮动布局中，子元素浮动会脱离文档流，无法撑开父元素高度，导致高度塌陷，高度塌陷导致父元素丢失以后，导致下面的元素自然上移，导致页面布局混乱

BFC（Block Formatting Context）块级格式化环境

BFC是CSS的一个隐藏属性，开启BFC状态的元素会开启一个独立布局结构

1.开启BFC的元素不会被浮动元素覆盖

2.开启BFC的元素子元素和父元素的外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

BFC不能直接开启，需要一些特定方法

1.设置元素浮动（不推荐，会脱离文档流，使下方元素上移，并且丢失宽度）

2.将元素设置成行内块（不推荐，丢失宽度）

3.将元素的overflow设置成为非visible的值（auto/hidden）

clear

clear属性用于清除float的不利影响，可选值

left/right/both——>左侧，右侧，两侧影响较大的

利用clear消除高度塌陷

使用伪类，为子元素配置

dispaly ：block，

clear：both

利用伪类解决内边距重叠

设置：：before{

content：“”，dispaly：table

}

定位

定位position

1.相对定位relative

将position设置成relative后开启相对定位，相对定位的特点

1.元素开启相对定位以后不设置偏移量则没有改变

2.元素相对定位是参照于元素在文档流中的位置进行定位

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质，块还是快，行内块还是行内块

2.绝对定位absolute

将position设置成absolute后开启绝对定位，绝对定位的特点

1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生改变

2.开启了绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，行内边成快，块的宽高呗内容撑起

4.绝对定位会使元素提升一个层级

5.绝对定位元素是相对其包含块进行定位的

ps：包含块：正常情况下，包含块就是离当前元素最近的祖先块元素

绝对定位的包含块就是离他最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位，则定位祖先元素，html（根元素，初始包含块）

3.固定定位fixed

将position设置成fixed后开启固定定位，固定定位实质上跟决定定位的特点相同，区别在于，固定定位是相对于浏览器的视口进行定位，随着滚动条进行滚动。

4.粘滞定位sticky

将position设置成sticky后开启粘滞定位，粘滞定位的特点相似于相对定位，

不同的是，可以在元素到达某个部位时，停止不动

元素的层级

z-index关键字，：数值越大，代表层级越高，

如果都不设置 z-index的值，则后设置定位的显示在前

祖先元素的层级再高也不会盖过后代元素