前语:咱们在铲除起浮之前，首先要知道什么是起浮，又为什么要铲除起浮。

1.起浮（float）

定义：

css起浮是一种使元素脱离一般标准流控制的办法，元素会依据float的值向左或向右移动，直到它的外鸿沟碰到父元素的内鸿沟或另一个起浮元素的外鸿沟停止，其周围的元素也会重新排列。起浮是一种十分有用的布局方法，可以改变页面中对象的前后流动顺序。

语法

选择器{float:特点值;}

特点

  • left 元素向左起浮
  • right 元素向右起浮
  • none 元素不起浮

2.为什么要铲除起浮

咱们要知道：起浮的框可以左右移动，直到遇到另一个起浮框或者遇到它外边缘的包括框。起浮框不属于文档流中的一般流，当元素起浮之后，不会影响块级元素的布局，只会影响内联元素布局。 此刻文档流中的一般流就会表现得该起浮框不存在相同的布局形式。当包括框的高度小于起浮框的时候，此刻就会出现“高度陷落”。

起浮的坏处

  • 由于起浮元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
  • 与起浮元素同级的非起浮元素会跟从这以后，由于起浮元素脱离文档流不占据本来的位置
  • 假如该起浮元素不是第一个起浮元素，则该元素之前的元素也需要起浮，不然简单影响页面的结构显现

3.铲除起浮

上面了解了起浮的坏处，因此，咱们在运用起浮的时候，必需要处理它的坏处，下面提供四种铲除起浮的办法。

下面用代码看一下正常的盒子

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铲除起浮</title>
</head>
<style>
    body {
        background-color: pink;
    }
    .box {
        width: 400px;
        border: 1px solid deeppink;
    }
    .c-r {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: red;
    }
    .c-g {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: green;
    }
    .c-y {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: yellow;
    }
</style>
<body>
    <div class="box">
        <div class="c-r">1</div>
        <div class="c-g">2</div>
        <div class="c-y">3</div>
    </div>
</body>
</html>

css铲除起浮
给.box下的div加上起浮

  .c-r {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: red;
    }
    .c-g {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: green;
    }
    .c-y {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: yellow;
    }

如下图，.box没有设置高度,下面的div设置起浮脱离文档流并排显现，父盒子并没有被撑开

css铲除起浮

3.1 通过增加新元素加上clear：both铲除

增加一个新盒子

       <div class="box">
        <div class="c-r">1</div>
        <div class="c-g">2</div>
        <div class="c-y">3</div>
        <div class="clear"></div>
    </div>

铲除起浮


  .clear {
        clear: both;
    }

css铲除起浮

全代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铲除起浮</title>
</head>
<style>
    body {
        background-color: pink;
    }
    .box {
        width: 400px;
        border: 1px solid deeppink;
    }
    .c-r {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: red;
    }
    .c-g {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: green;
    }
    .c-y {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: yellow;
    }
    .clear {
        clear: both;
    }
</style>
<body>
    <div class="box">
        <div class="c-r">1</div>
        <div class="c-g">2</div>
        <div class="c-y">3</div>
        <div class="clear"></div>
    </div>
</body>
</html>

3.2 父级增加overflow特点（父元素增加overflow:hidden）

通过给父元素增加overflow:hidden，激活BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铲除起浮</title>
</head>
<style>
    body {
        background-color: pink;
    }
    .box {
        overflow: hidden;
        width: 400px;
        border: 1px solid deeppink;
    }
    .c-r {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: red;
    }
    .c-g {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: green;
    }
    .c-y {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: yellow;
    }
</style>
<body>
    <div class="box">
        <div class="c-r">1</div>
        <div class="c-g">2</div>
        <div class="c-y">3</div>
    </div>
</body>
</html>

3.3运用after伪元素铲除起浮

其实跟3.1是相同的，仅仅一个是运用实在的空标签，而这儿运用伪元素；3.1不推荐运用，此种铲除起浮方法是浏览器常用方法，符合闭合起浮思维，结构语义化正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铲除起浮</title>
</head>
<style>
    body {
        background-color: pink;
    }
    .box {
        width: 400px;
        border: 1px solid deeppink;
    }
    .c-r {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: red;
    }
    .c-g {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: green;
    }
    .c-y {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: yellow;
    }
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;/*ie6铲除起浮的方法 *号只要IE6-IE7履行，其他浏览器不履行*/
    }
</style>
<body>
    <div class="box clearfix" >
        <div class="c-r">1</div>
        <div class="c-g">2</div>
        <div class="c-y">3</div>
    </div>
</body>
</html>

3.4运用before和after双伪元素铲除起浮

代码比3.3愈加简洁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铲除起浮</title>
</head>
<style>
    body {
        background-color: pink;
    }
    .box {
        width: 400px;
        border: 1px solid deeppink;
    }
    .c-r {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: red;
    }
    .c-g {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: green;
    }
    .c-y {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
        background-color: yellow;
    }
    .clearfix:after,
    .clearfix:before {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;/*ie6铲除起浮的方法 *号只要IE6-IE7履行，其他浏览器不履行*/
    }
</style>
<body>
    <div class="box clearfix">
        <div class="c-r">1</div>
        <div class="c-g">2</div>
        <div class="c-y">3</div>
    </div>
</body>
</html>