css 浮动 定位

时间:2023-07-16 13:27:16

  浮动

  元素的浮动是指设置了浮动属性的元素会脱离标准普通
  流的控制,移动到其父元素中指定位置的过程。 
  语法: float

   . left

      . right

    . none(默认)

    注意:      

         1. 浮动的元素要有父元素
      2. 浮动后的元素类似元素行内块元素,如果没有设置宽高,它的宽等同于内容的宽高.即使行内元素浮动后也可以设置宽高.
      3. 浮动的元素会脱离文档流,但是没有脱离文本流
      4. 兄弟(块级元素)之间要想在一排展示,都要浮动

  浮动带来的影响      

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

     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

    

 .clearfix:after{
  content: "";
3   display: block;
  clear: both;
} .clearfix{
  zoom: 1;
}

 定位

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

  2.postion : relative : 相对定位

       特点 : 不脱离文档流 ,以自身的位置来定位的

      应用场景:   1. 微调元素
            2.做绝对定位的参考,子绝父相

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

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

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

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