CSS 定位和浮动

定位

绝对定位

position:absolute;

特性：

1. 绝对定位相对于有定位的父盒子进行定位
2. 父亲或更上一级必须有定位，如果没有，则相对于浏览器定位
3. 绝对定位脱标，即会浮起来不占有原来的位置，所以通常和相对定位配合使用，简称子绝父相

相对定位

position:relative;

特性：

1. 相对定位相对于原来的位置进行定位
2. 相对定位不脱标
3. 相对定位与绝对定位配合使用

固定定位

position:fixed;

特性：

1. 固定定位常用于悬浮的按钮或者导航

偏移

上述定位的盒子均用top,bottom,left,right进行定位

1. top：顶部偏移量，定义元素先对于父元素上边线的距离
2. bottom：底部偏移量，定义元素先对于父元素下边线的距离
3. left：左部偏移量，定义元素先对于父元素左边线的距离
4. right：右部偏移量，定义元素先对于父元素右边线的距离

盒子的层级顺序

使用z-index, 最上层的z-index 最高，相当于楼层俯视图,z-index代表楼层，z-index=0;z-index=10;

---

浮动

float:left/right;

特性：

1. 浮动之后脱标
2. 浮动之后，其他元素将围绕着他，而绝对定位却会直接盖在其他元素上方。
3. 浮动盒子一行内显示（行内块），盒子沿上沿对齐
4. 浮动盒子具有行内块元素的特性，即可以一行显示多个盒子，可以调整宽高，默认和父盒子一样宽
5. 浮动只会影响后面的标准流，不会影响前面的标准流。

清除浮动：

所谓清除浮动，实际上是让父亲盒子即使不设高度，仍然占有位置，不会有下方的标准流上移占据浮动盒子的位置，父盒子高度通过子盒子撑开来决定。TIPS：如果父亲有高度就不用清除浮动。

清除浮动的方法：

额外标签法（隔墙法）：W3C推荐方法，父亲盒子内尾部插入块级元素（但是这种方法添加了无用的标签，使得结构不清晰，不常用）

<div style:"clear:both"></div>

父亲盒子CSS添加overflow:

overflow:hidden/scroll/auto;

注意：这种方法无法显示溢出的部分

:after 伪元素法： 父元素应用clearFix样式即可清除浮动 (百度，淘宝)

.clearFix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
/*
照顾低版本浏览器：IE6,IE7
*/
.clearFix {
    *zoom:1;
}

双伪元素法：xiaomi

.clearFix :before
.clearFix :after {
    content:"";
    display:table;
}
.clearFix:after {
    clear:both;
}
/*
照顾低版本浏览器
*/
.clearFix {
    *zoom:1;
}

使用方法：

浮动与标准流搭配使用：标准流决定上下排列，浮动来进行同一行排列。

父盒子一般不设置固定的高度（如淘宝商城的商品，高度随商品数目而定，通过子盒子来撑开），而只设置宽

 

定位和浮动总结

定位多数用于一个盒子内的元素的位置排布，如一个走马灯上的各种元素的排布，记住子绝父相。

浮动多数用于一行内子盒子的排布，与标准流搭配使用，搭配方法如上图所示。

定位层级>浮动层级>标准流层级

本文地址：https://blog.csdn.net/weixin_43288153/article/details/107366155