快速了解css中浮动与清除浮动

一拾九
186 阅读4分钟

浮动

浮动（float）字面意思是飘浮移动、流动，它在css中是一种非常有用的布局方式，在CSS中，使用浮动能使内容的排版变得简单，具有良好的伸缩性。

浮动有什么特性？

1.文字环绕，来看段代码

<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>float</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .pic {
            width: 200px;
            height: 200px;
            float: left;
        }

        .pic img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="pic">
        <img src="image/彩虹.jpg" alt="">
    </div>
    <div class="text">
        在暗蓝色的海上，海水在欢快地泼溅我们的心是自由的，我们的思想无边
        这全是我们的帝国，它的权力到处通行我们的旗帜就是王笏，谁碰到都得服从
        在暗蓝色的海上，海水在欢快地泼溅我们的心是自由的，我们的思想无边
        这全是我们的帝国，它的权力到处通行我们的旗帜就是王笏，谁碰到都得服从
        在暗蓝色的海上，海水在欢快地泼溅我们的心是自由的，我们的思想无边
        这全是我们的帝国，它的权力到处通行我们的旗帜就是王笏，谁碰到都得服从
    </div>
</body>

</html>

效果图如下：

4`9E}FP(XTNVI9@%%MGJ1B5.png

我们知道div是块级元素，自己独占一行，实现两个盒子在一行排列有多种办法:弹性布局，定位，变成行内块元素。但实现文字的环绕效果显然浮动效果更好。

2.浮动可以让块级元素同行显示

因为div是块级元素，定义两个div默认是两行排列：

LLLHK%(TTBH7(EJGHG_R5.png 我们给第一个盒子定义float:left,第二个盒子定义float:ringht(向右浮动)，就会得到如下图所示效果：

3.png 这样就实现了两个div在一行排列。

3.元素脱离文档流，父容器高度塌陷。

如果没有设置父容器的高度，子容器的高度应该会撑开父容器的高度；但是如果子元素设置了浮动属性，那么元素会脱离文档流，这样不会撑开父容器，父容器的高度为0。我们来看效果：

4.png

由上图清晰可见，body容器作为两个div容器的父容器，两个div盒子浮动了，body高度为0。

4.让行内元素可以设置宽高

我们知道行内元素是不能设置它的宽和高的，除非我们把它变成块级元素，但是这里我们可以通过添加浮动来设置它的宽高。

5.png

标签为行内标签，把它变成浮动之后就可以设置它的宽高了。

5.扩展一点：浮动元素可以设置margin，但是不能设置margin:0 auto。

margin是元素与元素之间的边距，margin:0 auto可以很好地让我们的元素实现在X轴上水平居中，但是浮动元素就不行了；我们来看一个例子：首先定义一个div向左浮动并加入margin值

6.png

当使用margin:0 auto时，页面效果就没了：

7.png

清除浮动

浮动的出现虽然使我们更好地布局页面，但是也带来了一系列坏的影响，父容器高度塌陷使得下面的元素会直接无视浮动元素进而撑开父容器。接下来有一些办法来解决；

1.直接设置父容器的高度

这种方法简单有效，但是实际的开放过程中有时不能知道父容器的具体高度，所以用的较少。

2.增加子容器，在子容器身上清除浮动，使用 （clear: both）清除浮动。

<html lang="en">

3.通过伪元素 XX::after{ content: ''; clear: both; display: block; }来清除浮动

来看代码：

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background: red;
            float: left;
        }

        .content {
            width: 200px;
            height: 100px;
            background: blue;
        }
        ul::after {
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="content"></div>
    <div class="content"></div>
</body>

</html>

通过伪元素来清除浮动的原理可以理解为在浮动元素的后面添加了一个伪块级元素，实质和第二种方法有点相似，不过它能使代码看起来更加优雅。

4.给下面受影响的容器添加clear:both

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background: red;
            float: left;
        }

        .content {
            width: 200px;
            height: 100px;
            background: blue;
        }

        .content {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="content"></div>
    <div class="content"></div>
</body>

</html>

此种方法可以很好地做到后面的元素不会受前面元素浮动的影响，看效果：

8.png

5.借助BFC容器的特点，抵消掉浮动的负面影响

BFC(Block formatting Context),是css渲染的一部分，主要决定盒子的布局和浮动相互影响的一个区域，BFC容器计算高度时，会将浮动元素的高度也计算在内。看代码：

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            width: 100px;
            height: 100px;
            margin: 10px;
            background: red;
            float: left;
        }

        .content {
            width: 200px;
            height: 100px;
            background: blue;
        }


        ul {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>

        </ul>
    </div>
    <div class="content"></div>
    <div class="content"></div>
</body>

</html>

效果图：

9.png

除了overflow:hidden属性可以创建BFC容器，还有： float:left, float:right；overflow:auto,scroll,overplay；网格布局(grid,inline-grid)；表格布局：(table table-cell table-caption inline-table)；弹性布局: flex inline-flex；定位： absolute fixed等可以创建BFC。

为了减少代码的耦合性，做到‘自己的事自己解决’；使用第三种和第五种清除浮动方法更好。

avatar
文章
阅读
粉丝