CSS浮动与定位详解-优快云博客

1、浮动元素的特点

浮动元素的特点
1、在一行显示
2、浮动元素会脱离文档流 导致下面没有浮动的元素识别不了它(浮动元素)的高度和位置 就会往上跑 占领浮动元素的位置
3、元素都是float:left 左浮动 元素从左往右依次排列 
      元素都是float:right 右浮动 元素从右往左依次排列
4、父元素浮动 子元素并不会继承父元素的浮动  如果想要子元素也在一行显示 我们需要给子元素也加浮动的属性
5、浮动属性不能继承
6、浮动元素本身具有块元素的特点 所以用了浮动====> 就不再需要再加display:block了
7、所有的元素都可以用浮动属性

文档流:指的是元素的排列方式
正常文档流:从左往右 从上往下排
文档流可以分为 行内元素 、块级元素
脱离文档流:元素的正常排列方式被打破

脱离文档流的影响: float (左浮动 右浮动  none -- 不浮动)    定位

浮动元素产生的负作用 ----  主要原因就是高度为0
1、给父元素设置北京颜色属性不起作用(没有高度)
2、给父元素设置边框border属性没有被撑开
3、给父元素设置内部边距padding属性也没有被撑开

复制代码

2、如何清楚浮动产生的影响

1、给浮动元素的父元素 添加一个高度height属性
2、给浮动元素的父元素 添加overflow:hidden属性
3、给浮动元素的父元素结束标签之前加一个具有块元素特点的标签(我们一般用div) 给元素加一个clear:both <div style="clear:both"></div>
4、原理同3 在父元素结束标签之前加一个伪元素 clearfix 伪元素去清除浮动(这种方法是项目中最常用的方法)
// 利用伪元素:after清浮动的固定代码；只要清浮动我们在浮动元素的父元素上加上一个.clearfix即可
.clearfix:after  {
    //前三个 缺一不可
    display:block;/*确保元素是一个块级元素*/
    clear:both;/*不允许左右两边有浮动对象*/
    content:"";/*这是伪元素:before和:after天生自带的属性  如果不写伪元素不起作用*/
    /*写全的样式属性:下面的4个*/
    height:0;/*防止在低版本浏览器中默认height:1px的情况 我们用height:0 去覆盖*/
    font-size:0；/*字体大小*/
    overflow:hidden;/*溢出隐藏*/
    visibility:hidden;/*让所有可见性的元素隐藏*/
}
.clearfix {
    *zoom:1/*css hack 兼容IE7浏览器*/
}
复制代码

3、如何让元素消失在视野中

1、透明度opacity:0  [0~1]
2、display:none 隐藏 // 比较推荐这种做法
3、width:0/height:0 和overflow:hidden
4、line-height:0 和overflow:hidden(没有设置高度的情况下)
5、visibility:hidden 让所有可见性的元素隐藏
6、margin/padding设置足够大  只要能消失即可
7、利用transform属性 让translate坐标设置足够大 transform:translateY(-9999999px)

脱离文档流的元素相当于平行漂浮在文档流之上
visibility:hidden  盒子看不到 但是盒子所占的大小依然还在
display:none -- 盒子完全从页面中消失
页面检查伪元素:可以发现在元素之前有::before 在元素之后有一个::after
复制代码

4、绝对定位的特点

绝对定位的特点
1、它设置top、bottom、left、right四个方位值
2、绝对定位元素会脱离文档流 不占位 导致后面的元素会往前跑 占领它的位置
3、绝对定位元素一定要有相对参照物(它的直接父级)，如果父级元素没有加相对参照物，它会一级一级往上查找，直到找到最外层的根元素html
4、如果方位里 同时有left和right 最后听left  同时有top和bottom 最后听top 以后在实际项目中只需要设置top或者bottom left或者right
5、z-index 越大 层级越在上
6、一个元素定在一个元素上 或者两个元素的叠加这种情况 我们都可以用定位(绝对定位)
注意:绝对定位一定要给他相对参照物
 绝对定位一定要指明它定位的方向
7、相对参照物只要是定位元素就可以(绝对定位 相对定位 固定定位) 优先选相对定位 position:relative
绝对定位和固定定位 都会脱离文档流 不占位
复制代码

5、相对定位的特点

1、不会脱离文档流 占位 所有后面的元素不会往前跑
2、可以设置上下左右四个方位
如果同时存在top和bottom值 只有top起作用
如果同时设置了left和right值 只有left起作用
3、参照物:自己本省
4、可以设置z-index属性 z-index越大越在上
z-index 必须要和定位元素(绝对、相对、固定)同时使用 才起作用
复制代码

6、固定定位的特点

固定定位的特点  /*很多网站 头部 左侧 右侧的导航栏  都用的固定定位 不会随着滚动条滚动位置发生变化*/
1、会脱离文档流
2、可以设置上下左右四个方位
如果同时存在top和bottom值 只有top起作用
如果同时设置了left和right值 只有left起作用
3、参照物:整个浏览器窗口
4、可以设置z-index改变层级 值越大 越在上
复制代码

7、定位特性的分析

定位总结
相同点：
1、可以设置上下左右四个方位   如果同时存在top和bottom值 只有top起作用  如果同时设置了left和right值 只有left起作用
2、都可以设置z-index改变层级 而且z-index越大 越在上

不同点
1、是否脱离文档流
绝对定位:是  相对定位:否   固定定位:是
只有相对定位没有脱离文档流 绝对和固定定位都脱离了文档流
2、参照物
绝对定位:是具有定位元素的父级元素 如果直接父级没有定位元素 则往上级直到找到我们的根元素html为止
绝对定位元素 一定要给他的直接父元素加相对参照物(positon:relative)
相对定位:它自己本身
固定定位:整个浏览器窗口
复制代码

8、z-index的特点

1、都有定位元素的标签 在后面的标签的z-index要比在前面的z-index的值要大
2、z-index没有单位 支持负值
3、z-index一般都是同级元素的比较     子元素和父元素去比较  z-index并不遵循我们说的规律:值越大 越在上(我们一般不会拿子元素去跟他的父元素去比较z-index的大小)
4、z-index属性不能继承
复制代码

动力: 这是我的学习笔记(来源于视频或者查阅文档),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!