浮动

什么是浮动？

标签的浮动是指设置了浮动属性的标签会脱离标准流的控制，移动到其父标签的指定位置

浮动属性

  • float

    • left

    • right

    • none 默认

浮动的作用

  • 图文环绕

  • 页面布局

浮动的问题

标签浮动以后，脱离的正常文档流，导致父标签无法被撑开，会影响后续正常布局

清浮动的几种方法

  • 给浮动标签的父标签固定高度（不够灵活）

  • 在浮动标签的最后加一个div（块标签），标签本身不符动，且添加样式 clear:both;(代码冗余)

  • 给父标签加overflow属性，overflow为visible以外的其他值时可以帮助实现

  • 推荐方法：给浮动标签的父标签添加 .clearfix

    • .clearfix {
          *zoom:1; //这是针对于IE6/7的
      }
      .clearfix:after {
          content:"";
          clear:both;
          display:block;
      }

    •  

伪元素
  • div:after {
        
    }
    //向当前元素的最后一个子元素后添加一个元素
    div:before {
        
    }
    //向当前元素的第一个子元素前添加一个元素

  •