css清除浮动

前端开发王子恒
1,670 阅读3分钟

前言:我们在清除浮动之前，首先要知道什么是浮动，又为什么要清除浮动。

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>

image.png 给.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设置浮动脱离文档流并排显示，父盒子并没有被撑开

image.png

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;
    }

image.png

全代码：

<!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>
avatar
文章
阅读
粉丝
相关推荐
如何清除浮动
211阅读
 · 
0点赞
CSS之浮动Float
583阅读
 · 
1点赞
解锁CSS浮动之谜：面试者的必备技能
998阅读
 · 
31点赞
HTML + CSS 连载 | 58 - CSS 元素浮动
367阅读
 · 
6点赞
浮动布局的使用和如何消除浮动
167阅读
 · 
21点赞
轻松搞定CSS布局：新手必读的浮动、清除浮动和BFC指南
322阅读
 · 
35点赞
菜鸟入门第五天——CSS浮动
170阅读
 · 
38点赞
深入理解CSS浮动（Understanding CSS Float）
193阅读
 · 
19点赞
CSS面试常考题：清除浮动
829阅读
 · 
50点赞
前端面试热门问题--浮动和清除浮动（CSS）
1.1k阅读
 · 
51点赞

友情链接：