清除浮动

浮动副作用

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，

1. 浮动元素会造成父元素高度塌陷
2. 后续元素会受到影响

xxxxxxxxxx
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

xxxxxxxxxx
.container{
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}

xxxxxxxxxx
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

xxxxxxxxxx
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

清除浮动

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种

1. 父元素设置高度
2. 受影响的元素增加clear属性
3. overflow清除浮动
4. 伪对象方式

父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

xxxxxxxxxx
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

xxxxxxxxxx
.container{
    height: 300px;
    width: 350px;
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}

受影响的元素增加clear属性

如果同级元素受到影响，直接给收到影响的元素增加clear属性

xxxxxxxxxx
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

xxxxxxxxxx
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
    clear: both;
}

overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动

这种情况下，父布局不能设置高度

父级标签的样式里面加: overflow:hidden;

xxxxxxxxxx
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

xxxxxxxxxx
.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

伪对象方式

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理

为父标签添加伪类after,设置空的内容，并且使用clear:both;

这种情况下，父布局不能设置高度

xxxxxxxxxx
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

xxxxxxxxxx
.container {
    width: 350px;
    border: 1px solid red;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}
.box {
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav {
    width: 100px;
    height: 100px;
    background-color: red;
}

实时效果反馈

1.下列关于清除浮动的方法，描述错误的是：

A 如果父元素塌陷，可以设置父元素高度消除浮动的副作用

B 如果后续元素收到浮动影响，可以使用clear: both;清除

C 如果父元素塌陷同时影响后续元素，可以使用伪对象方式清除

D 如果父元素塌陷同时影响后续元素，可以使用float清除

答案

1=>D