CSS浮动以及清除浮动float

女爷i 2023-01-18 06:38 266阅读 0赞

# float设定浮动 #

> 浮动的元素脱离标准流（文档流），相当于飘浮起来了，会释放原先占有的位置，位置不再保留，浮动的元素都具有**行内块元素**的特性，浮动的盒子只会影响后面的标准流，不会影响前面的标准流

<table> 
 <thead> 
  <tr> 
   <th>浮动类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>float: left;</td> 
   <td>向左浮动</td> 
  </tr> 
  <tr> 
   <td>float: right;</td> 
   <td>向右浮动</td> 
  </tr> 
 </tbody> 
</table>

# 清除浮动 #

由于很多时候父盒子的高度不需要单独设定，由子盒子直接撑开，但是当子盒子开启浮动后，父盒子会产生高度塌陷，高度直接变为0，这样会对父盒子后面的排版产生影响，需要`clear: both;`清除浮动，清除浮动的本质是闭合浮动，把浮动限制在一定范围内

## 清除浮动的常见方法 ##

### 1. 额外标签法 ###

因为浮动的特点是不影响前面的标准流，只影响后面的标准流，因此我们可以在浮动的末尾设定一个空的**块级元素**标签，设定`clear: both;`属性，把浮动隔开即可

### 2. 父级添加overflow属性 ###

给父元素添加`overflow`属性，值可以是`hidden`、`scroll`等，缺点是不能显示溢出部分

### 3. 父级添加after伪元素 ###

给父元素添加，添加`:after`伪元素是第一种方法的升级版，原理是一样的，但用这种方式避免了第一种方式的语义化差的问题

.clearfix:after { 
    	content: "";
    	display: block;
    	visibility: hidden; /*不可见*/
    	height: 0; /*没有内容，高度也置为0*/
    	clear: both;
    }
    .clearfix { 
    	/*兼容IE6、IE7*/
    	*zoom: 1;
    }

### 4. 父级添加双伪元素 ###

给父元素添加，这种方法更好地符合了闭合浮动的策略

.clearfix:before, .clearfix:after { 
    	content: "";
    	display: table;/*有待探讨，嘿嘿*/
    }
    .clear:after { 
    	clear: both;
    }
    .clearfix { 
    	/*兼容IE6、IE7*/
    	*zoom: 1;
    }