CSS——float属性备忘笔记

经过指定CSS属性float的值,从而使元素向左或向右浮动,而后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性，做用就是改变块元素对象的默认显示方式，HTML标签设置了float属性以后，它将再也不独自占据一行，从而能够实现多个元素同处一行的效果。Float的功能很强大，可是若是没有好好掌握而使用极可能会成为你调试样式的噩梦。

使用Float样式，若是没有清除浮动，那么有浮动元素的父元素容器将没法自动撑开。若是没有清除内部浮动，此时会致使浮动的父元素没法自动撑开到自己应有的高度。也就是说：当一个元素是浮动的，若是没有关闭浮动时，其父元素不会包含这个浮动元素，由于此时浮动元素从文档流中脱离。

因此须要在样式定义的后面进行清除浮动，清除浮动的方法有几种：

 

1.Clear:both清除浮动

 

clear清除浮动主要是借用clear属性来清除浮动，这是一种比较陈旧的清除浮动方法，可是感受通常遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动，咱们须要在须要清除浮动地方的后面紧接着增长一个额外元素，好比说一个div标签，而且定义他们的样式为“clear:both”,其一般使用的结构方式以下：

 

<div class="demo A">
    <div class="demoB demoFloat">float left</div>
    <div class="demoC demoFloat">float right</div>
    <div class="demoD demoFloat">not float</div>
    <div class="clear"></div>
</div>

  .clear {
    clear:both;/*主要使用这个属性来清除浮动*/
    /*为了避免让ie具备必定的空间，我的建议加上下面三个属性*/
    height: 0;
    line-height: 0;
    font-size: 0;
  }

 

 

2.使用overflow

用overflow方法来清除浮动相对来讲比较简单，只须要在有浮动的元素上面加上下面的属性：

 

 .A {
    overflow: auto;
    zoom: 1;/*在ＩＥ下触发其layout，也要以使用_height:1%来代替zoom*/
  }

 

使用overflow属性来清除浮动有一点须要注意，overflow属性共有三个属性值：hidden,auto,visible。咱们可使用hiddent和auto值来清除浮动，但切记不能使用visible值，若是使用这个值将没法达到清除浮动效果，其余两个值均可以。

对于overflow属性清滁浮动咱们还能够这样应用：

 

   .A {
      overflow: auto;/*除ＩＥ6以及其如下版本不识别以外，其余浏览器都识别*/
   }
	
   * html .A {
      height: 1%; /* IE5-6 */
   }

 

3.clearfix方法

这种方法清除浮动是如今网上最拉风的一种清除浮动，是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理相似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfix利用其伪类clear:fix在元素内部增长一个相似于div.clear的效果。下面来看看其具体的使用方法：

HTML Code:

 

   <div class="demo A clearfix">
     <div class="demoB demoFloat">float left</div>
     <div class="demoC demoFloat">float right</div>
     <div class="demoD demoFloat">not float</div>
   </div>

 

使用clearfx来清除浮动最主要掌握一点，须要在有浮动元素的父元素中加入一个叫clearfix的class名称，好比说咱们这个例子，咱们须要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式

 

  .clearfix:before,
  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
  }
  .clearfix:after {clear: both;}
  .clearfix {zoom: 1;} /* IE < 8 */

 

其实只使用clearfix:after就能够达到清除浮动的效果，但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，因此为了让浏览器兼容这个clearfix的清除浮动，在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题。

在这么多种清除浮动的方法中，都没有离开最原始的clear:both方法，特别是clearfix:after清除浮动，彻底就是clear:both的一种变身，区别在于不须要在html增长一个标签，而只须要在有浮动元素的父元素中加上一个clearfix的class名，这样就轻松解决了清除浮动的问题。