浮动与清除浮动

日期：2020年6月19日

float 与 清除浮动

浮动——float

float 属性有 3 个属性值：left、right、none，分别表示左浮动、右浮动、不浮动，当 float 不为 none 时会使当前元素脱离文档流，看起来像浮起来一样，下面看一个例子：

    
    
    
    
    


    

        
1-l
        
2-r
        
3-r
        
4-l
        
5-r
        
6-n
        
7-r
        
8-l
        
9
    

效果如下：

其中 l、r、n 分别代表 float 的三个属性，可以看到当 float 为 none 时，元素就按照正常的文档流排布；当 float 不为 none 时，元素会脱离文档流，不会占据实际文档流中的空间，而是浮于它们之上，元素的排列顺序也与元素在代码中出现的顺序无关

float 可能导致父元素高度塌陷

float 造成父元素高度塌陷的情况只会出现在我们没有给父元素设置高度的时候，我们看两个例子：

// 例一：无浮动情况
.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: none;
    background: lightsalmon;
}


    
子

父兄

这里子元素没有浮动，所以即使父元素没有设置高度，它也会被子元素撑开而具有高度
效果：

// 例二：浮动情况
.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}


    
子

父兄

这里子元素设置了浮动，所以子元素在实际文档流中不占据空间，此时父元素因为没有设置高度，所以高度会坍塌为 0
效果：

清除浮动

清除浮动就是为了解决上面说的父元素在没有设置高度时，子元素浮动会使父元素高度坍塌的问题，下面就是我验证有效且常用的几种方法：

1. 给父元素设置高度

.p-box{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}


    
子

父兄

效果：

2. 为父元素添加 overflow: hidden 样式属性

.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px; 
    overflow: hidden;     // 父元素添加 overflow: hidden 属性
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}


    
子

父兄

效果：

3. 在子元素后追加一个空白子元素，并添加 clear: both 样式属性（不推荐，会造成冗余）

.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}
// 添加一个带 clear: both 属性的空白子盒子
.c-box{
    clear: both;
    height: 0;
}



    
子
    


父兄

效果：

4. 对父元素使用伪元素 ::after 来清除浮动（主流）

.p-box{
    width: 100px;
    border: 1px solid #000;
    margin-top: 50px;
}
.p-box::after{
    content: '';
    display: block;
    clear: both;
}
.pp-box{
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}
.f-box{
    width: 50px;
    height: 50px;
    float: left;
    background: lightsalmon;
}


    
子

父兄

效果：