浮动 定位 以及其区别

Posted 2020-12-14 ximenchuifa

浮动　　

　　元素的浮动是指设置了浮动属性的元素会脱离标准普通
　　流的控制，移动到其父元素中指定位置的过程。 
　　语法: float :
　　　　  left
　　　　  right
　　　　  none(默认) 
　　注意:
　　1. 浮动的元素要有父元素
　　2. 浮动后的元素类似元素行内块元素,即使行内元
　　素浮动后也可以设置宽高.(类似不代表是,浮动后的盒子可以设置宽高，但是不能用行内块的方式让盒子居中，比 如：给浮动的盒子父元素添加 text-algin ：center ；是不起作用的；需要给盒子margin才能调整其位置) 　         

 　3. 浮动的元素会脱离文档流,但是没有脱离文本流   

     浮动带来的影响： 　　

　　   父元素高度塌陷 : 子元素浮动,父元素没有设置高,子元素
　　不能把父元素的高给撑开,导致父元素没有高度,这种现
　　象叫父元素高度塌陷 .

   清除浮动　

　　1.加固定的高
　　 缺点:不灵活

　　2.额外标签法 

　　 在父元素的末尾加一个空div, 给父元素设置
　　clear:left/right/both
　　优点： 通俗易懂，书写方便
　　 缺点： 添加许多无意义的标签，结构化较差。

　　3.父级添加overflow属性方法
　　在父元素身上设置 : 除了visible以外的其他overflow
　　的值都可以 , overflow:hidden/scroll/ auto
　　原因: 是overflow触发了BFC, 在计算BFC高度的时
　　候,浮动的子元素的高度也计算在内
　　优点:代码简洁 
　　缺点 :无法显示需要溢出的元素

　　4.使用after伪元素清除浮动 
　　优点 : 结构语义化正确
　　缺点 : 由于IE6­7不支持:after，使用 zoom:1

　　

1 .clearfix:after {
2      content: "";
3     display: block;
4     clear: both;
5 }
6 .clearfix {
7     zoom: 1;
8 }

 

 

定位　　

　　 1.postion: static 默认值 静态定位

　　2.postion : relative : 相对定位
　　特点 : 不脱离文档流 ,以自身的位置来定位的
　　应用场景 :
　　微调元素
　　做绝对定位的参考，子绝父相

　　3.position:fixed : 固定定位
　　不管怎么滚动滚动条,始终固定在某个位置 
　　特点 : 脱离了文档流,以浏览器窗口来定位的

　　4.position:absolute : 绝对定位
　　特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来
　　说的,如果父元素都没有定位,以html的位置来说的
　　备注 : 已定位的”父元素”可以是 绝对定位/ 相对定位/固
　　定定位,子绝父相用的最多

　　方向关键字
　　  left   　　: 正值是向右走的 负值往左走
　　 top  　　: 正值是向下走的  负值往下走
　　right 　　: 正值是向左走的  负值往右走
　　bottom    : 正值是向上走的  负值往下走
　　注意: static定位身上不能用方向关键字

　  脱离文档流的元素　

　　1.固定定位
　　2.绝对定位
　　3.浮动 
　　特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由
　　内容撑开的,即使是行内元素,可以设置宽高

     如何让定位的盒子垂直居中:

  

 1 {
 2             left:50%;
 3             top:50%;
 4             margin-left:-盒子宽度的一半;
 5             margin-top:-盒子高度的一半;          
 6  }   
 7 
 8 {
 9             left:50%;
10             top:50%;
11            <!--向左移动自己宽度的一半-->
12             transform: translateX(-50%);
13            <!--向上移动自己高度的一半-->
14             transform: translateY(-50%);          
15  }                       

 

浮动定位区别　

　　CSS2中能够使标签脱离文档流的属性有： 

　　float:left/right? 

　　postion:absolute/fixed?

　　float脱离文档流时，其他盒子会无视这个标签，但其他
　　盒子内的文本、图片、表单标签依然会为这个标签让出
　　位置，环绕在周围( 脱离文档流，不脱离文本流 )。
　　position脱离文档流的标签，其他盒子完全无视它，包括
　　标签内部的文本、图片、表单标签（ 既脱离文档流，又脱离文本流 ）
　　注意：所有的标签都能够使用以上属性，脱离文档流之后

　　1. 不再区分块级和行内标签，类似行内块元素。 
　　2. 宽高默认由内容撑开，可以设置width和height及所有
　　 盒模型属性,即使行内元素也可以设置宽高