清除浮动的几种方法

心已赠人 2022-05-10 01:36 230阅读 0赞

# 浮动产生负作用 #

1.背景颜色不能使用

子元素float ，如果父元素设置了background，而父级不能被撑开，所以导致背景颜色不能显示

2.边框不能撑开

如果父级设置的border,子元素float ，父级不能撑开，导致边框不能随内容而撑开

3.margin 、 padding 设置值不能正常显示

### 解决方法 ###

### 子元素都设置了float ， 父元素高度不能被撑开，样式margin显示有问题 ###

## 方法一 ##

在子元素下放个标签，在这个标签中使用 clear：both ，来清除浮动

注 ：一般不推荐使用，使用这种添加标签清除浮动，会使页面结构混乱

.clear{clear: both;}

### 方法二 ###

给父元素添加属性 overflow：auto

.over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/

### 方法三 ###

使用伪元素清除浮动

推荐使用这一种方法

.clearfix::after{
        content:"";/*设置内容为空*/
        height:0;/*高度为0*/
        line-height:0;/*行高为0*/
        display:block;/*将文本转为块级元素*/
        visibility:hidden;/*将元素隐藏*/
        clear:both;/*清除浮动*/
    }
    .clearfix{
        zoom:1;/*为了兼容IE*/
    }

### 方法四 ###

使用双伪元素

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