CSS清浮动_html/css_WEB-ITnose

前面的话

　　人们经常谈起清浮动，其实就是解决浮动元素的包含块高度塌陷的问题

 

定义

　　clear 清除

　　值: left | right | both | none | inherit

　　初始值: none

　　应用于: 块级元素

　　继承性: 无

left:左侧不允许存在浮动元素right:右侧不允许存在浮动元素both:左右两侧不允许存在浮动元素none:允许左右两侧存在浮动元素

　　[注意]设置clear属性的元素并不能改变浮动元素，而只能改变自身

　　CSS2.1引入了一个清除区域，清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围，这意味着元素设置clear属性时，它的外边距不改变

 

方法

　　对于标准浏览器来说，清浮动其实就两种方法，一种是在浮动元素下面添加新元素设置clear属性；另一种是触发包含块的BFC，使其包含浮动元素。而对于IE7-浏览器，则用到其特有属性haslayout

 

【1】clear属性

　　[1]

　　并不是很适用，若包含块为

，则子元素只能为
• ，则在
• 后面添加
  元素不合适

  　　[2]
  

  　　虽然clear属性只应用于块级元素，但在除IE7-以外的其他浏览器都可以将clear属性应用于
  元素

  　　[3]为浮动元素的after伪元素设置clear属性

  　　.clear:after{content:""; display: block; clear: both;}

  　　IE7-浏览器不支持after伪元素

   

  【2】BFC

  　　[1]float: left/right

  　　[2]position:absolute/fixed

  　　[3]display:inline-block/table-cell/table-caption/flex

  　　[4]overflow:hidden/scroll/auto

  　　关于BFC的详细信息移步至此

   

  【3】IE7-

  　　关于IE7-浏览器有一个其特有的属性haslayout，当触发包含块的haslayout时，浮动元素被layout元素自动包含

  　　[1]display:inline-block

  　　[2]height/width:除auto外

  　　[3]float: left/right

  　　[4]position: absolute

  　　[5]writing-mode: tb-rl

  　　[6]zoom: 除normal外

  　　关于haslayout的详细信息移步至此

   

  兼容

  　　在所有浏览器中都兼容的清浮动方案如下：

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