CSS 之 float

想必只要是写过CSS的同学，对float属性肯定不陌生。float是在CSS很常用的属性之一了。但有的时候，常用容易变成滥用，哪里都来一个float，也就造就了一些坑。

flaot属性与display属性

有的时候看回自己刚入行时写的CSS，在浮动块的相关代码时总是有类似的代码片段

div {
    width: 200px;
    height: 200px;
    display: inline-block;
    float: left; 
}

不知道大家觉没觉得上面的代码有问题。答案是明确的，而问题在于display的设置上。

设置了float属性值为非none的元素，display的属性值都会变成block，无论该元素原先的display属性值是什么

下面我们来看看证据,请看代码：

  
  
  
    
    
    
  
  
    
hello
  
  

下面是浏览器计算的结果,display的值始终为block

  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  display: block;
  float: left;
  height: 16px;
  width: 37.046875px;

所以在元素设定float属性的时候，不必去重复设定display的值

浮动清除

为什么要清除浮动
让元素浮动会导致其父族元素的高度崩塌，从而会导致一些图文围绕的问题（如果原意并非是要图文围绕）。所以清除浮动事实上就是让父元素拥有高度。

清除浮动常用的三种方式：

• 父元素overflow:hidden
• 插入clear-fix div
• :after方法

父元素overflow:hidden

• 代码:

  
    
        
          
          
          
        
        
          
  
            
  
          
          
  this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text
        
    
  

• 概述：为浮动元素的父元素设置overflow:hidden.使父元素扩展至浮动元素的高度(浏览器会自动计算浮动元素的最高高度作为父元素高度).不能同时再设置height.

插入clear-fix div

• 代码：

  
    
    
        
        
        
    
    
            
  
            
  
        
  this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text
    
    
  

• 概述：在浮动元素后添加一个clear-fix的div块元素，为该元素设置clear:both，以达到清除浮动的作用。此方法兼容性较好。但是在使用浮动较多的情况下，会产生较多额外的div元素，使得html难以维护。

:after方法

• 代码：

   
    
    
        
        
        
    
    
        
  
            
  
        
        
  this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text
    
    
  

• 概述：这个方法与clear-fix方法相似。但不用添加额外的div。在浮动元素的父元素中使用after伪类，相当于在父元素的后面添加一个div元素用于清除浮动，但是它是不可见的。较多大型网站使用该方法清除浮动。