【CSS】CSS浮动和定位小结

最近学习了浮动和定位，做个小结，理理思路：

1. 如果用了浮动，其父元素一般最好需要清除浮动
2. 如果用了绝对定位，一般最好要给参考点设置position: relative

浮动

左右浮动，设置float： right or float: left

所有元素设置浮动后，会变成行级块元素（inline-block）

设置浮动元素后对周围元素的影响：

1. 对于自身： 脱离了正常的文档流

2. 对于父元素：无法撑开父元素，造成父元素的塌陷

3. 对于非浮动兄弟元素：
   如果兄弟元素为块级元素a，则该块级元素a会忽略浮动元素b从而占据浮动元素b的位置，位置处于浮动元素a的下层，并且无法通过z-index来调整层级，但是块级元素a内的文本以及内联元素会围绕着浮动元素b排列
   如果兄弟元素为内联元素，则会围绕着浮动元素b排列

4. 对于浮动兄弟元素：
   同方向浮动元素：该浮动兄弟元素紧跟至浮动元素后
   反方向浮动元素：互不影响，位于同一条水平线上

5. 对于子元素：可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

清除浮动

由于浮动的产生会使父元素无法撑开，背景无法正常显示，margin，padding设置无效，所以需要清除浮动。方法如下：

1. 父级div（class="parent-div"）定义伪类

.parent-div:after {
	content: '';
	clear: both;
	display: block
	}

2. 结尾处添加空div，清除浮动

.div {
	clear: both
	}

3. 父级div定义固定高度height
4. 父级idv定义高度和overflow：hidden

定位

1. position: absolute 绝对定位
   相较于有定位的父元素进行定位（一级一级往上找），若没有，则相较于body进行定位，会脱离标准文档流
2. position: relative 相对定位
   相较于原来的位置进行定位，依然占据在原来文档标准流中的位置，没有脱离标准文档流
3. positon: fixed 固定定位
   不管界面怎么滚动，永远相较于浏览器某个边框进行定位，即固定在某个位置不变
4. position: stasic静态定位
   标准文档流中就是静态定位，所以这个定位方式基本不用
5. position: sticky CSS3新属性
   当目标区域在页面中可见是，表现为position:relative一样，当超出了页面部分，就固定在某个地方，表现为position:fixed一样