CSS之浮动和定位

浮动

浮动的特点

 

 

 

 

 

 浮动的重要特点

浮动和标准流：浮动只会影响浮动之后的元素，浮动对于自身之前的标准流是没有任何影响的。并且在之前标准流占据的位置，浮动过去不了

清除浮动

 

 

 

 

 

 

 

 

此方法清除浮动就是在父元素的后面用css新增一个盒子，就不需要在页面结构上新增，这样的好处就是结构清晰，跟额外标签法功能一样

 

 

此方法是跟额外标签法类似，不过是用css伪类选择器给父盒子的前后都加上一个块级元素，然后实现的功能跟额外标签法一样

定位

相对定位

 

 

 

绝对定位

绝对定位是根据父盒子来移动距离的。如果父盒子没有定位，就往上找，最多找整个文档流为起点。

 

 

 

固定定位，可以固定在浏览器可视窗口，不会随着滚动条移动而移动，

 

 

 粘性定位

粘性定位就是相对定位和绝对定位的混合体，既有相对定位保留盒子位置的特点又有固定定位以浏览器为参照的特点，

可以让导航栏在页面滚动条中，滚动到页面的某个位置，就固定住。类似于固定定位效果，当滚回去的时候，又会恢复成原来的样子，类似于固定页面的导航栏

 

 定位总结

 

 定位的叠放次序 Z-index

 

 定位盒子如何水平居中or垂直居中

因为定位的盒子对于margin:auto;是不起作用的，所以只有通过以下算法实现定位居中