清除浮动的方式

逃离我推掉我的手 2022-04-22 10:44 166阅读 0赞

## 1. 给父级定义height ##

.parent { 
        background-color: red;
    }
    .float-left { 
        width: 200px;
        height: 200px;
        float: left;
    }

## 2. 在结尾处添加空div，样式设置为clear: both ##

.parent { 
        background-color: red;
    }
    .float-left { 
        width: 200px;
        height: 200px;
        float: left; //这里clear的作用是清除浮动，它需要跟在浮动元素的后面
    }

## 3. 父级定义伪类 ##

> "clearfloat"是父容器的class名称，“content:” ";"是在父容器的结尾处放一个空白字符，"height:0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？ 我们添加一条IE6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

.parent { 
        background-color: red;
    }
    .float-left { 
        width: 200px;
        height: 200px;
        float: left;
    }
    .clearfloat:after { 
        display: block;
        clear: both;
        content: '';
        visibility: hidden;
        height: 0;
        zoom: 1;
    }

## 4. 把父级变成BFC ##

> **生成BFC的条件**
> 
> 1.  根元素
> 2.  float的值不为none
> 3.  overflow的值不为visible
> 4.  display的值为inline-block、table-cell、table-caption
> 5.  column-span: all
> 6.  position的值为absolute或fixed
> 7.  弹性盒（flex或inline-flex）
> 8.  display: flow-root

.parent { 
        background-color: red;
        float: left;
    }

.parent { 
        background-color: red;
        overflow: hidden;
    }

.parent { 
        background-color: red;
        display: table-cell;
    }

.parent { 
        background-color: red;
       	position: absolute;
    }