day05浮动

day05

浮动

浮动

什么是浮动？

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

浮动属性

• 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 {
  	
  }
  //向当前元素的第一个子元素前添加一个元素