浮动知多少

林小饼
112 阅读1分钟

1.浮动是什么？

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。浮动最初的设计是为了实现文字环绕效果。

image.png

image.png

2.浮动的特点

2.2浮动会脱离标准流（脱标）

不浮动

<!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>Document</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            background-color: #ccc;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
        }

        .two {
            background-color: skyblue;
        }

        .three {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>

</body>

</html>

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>Document</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            background-color: #ccc;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
        }

        .three {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>

</body>

</html>

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>Document</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            background-color: #ccc;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: right;
        }

        .two {
            background-color: skyblue;
        }

        .three {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>

</body>

</html>

image.png

从以上可以看出，div 属于块级元素，不浮动的时候，独占一行；一旦浮动，就会脱离标准流，不占据原来的位置，甚至会盖住普通的元素。

2.2浮动可以内联排列

<!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>Document</title>
    <style>
        li {
            float: left;
            list-style: none;
            width: 20px;
            height: 20px;
            background-color: pink;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>

</html>

image.png

从以上可以看出，浮动的元素可以设置宽高，类似于行内块，一行显示多个，内联排列。但行内块会有均匀的间距哦；浮动没有，可以自己设置margin值。

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>Document</title>
    <style>
        .father {
            width: 200px;
            background-color: #ccc;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            float: left;
        }

        .three {
            background-color: orange;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>
    <div style="width:200px;background-color: palegreen;">我是标准流</div>

</body>

</html>

image.png

从以上可以看出，当父元素不设置高度，子元素就会浮动脱标，父元素的高度自然撑不起来，造成父元素高度坍塌，那如何解决这一问题呢？ 这就涉及到清除浮动啦！

3清除浮动

3.1额外标签法

在最后一个浮动标签后，新加一个标签，给其设置clear：both；

<!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>Document</title>
    <style>
        .father {
            width: 200px;
            background-color: #ccc;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            float: left;
        }

        .three {
            background-color: orange;
            float: left;
            
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
        <p style="clear: both;"></p>
    </div>
    <div style="width:200px;background-color: palegreen;">我是标准流</div>
  
</body>

</html>

image.png

3.2给父元素添加 overflow:hidden;

<!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>Document</title>
    <style>
        .father {
            width: 200px;
            background-color: #ccc;
            overflow: hidden;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            float: left;
        }

        .three {
            background-color: orange;
            float: left;      
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>
    <div style="width:200px;background-color: palegreen;">我是标准流</div>
  
</body>

</html>

image.png

3.3使用after伪元素清除浮动

<!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>Document</title>
    <style>
        .father {
            width: 200px;
            background-color: #ccc;
        }

        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            float: left;
        }

        .three {
            background-color: orange;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>
    <div style="width:200px;background-color: palegreen;">我是标准流</div>

</body>

</html>

image.png

3.4使用before和after双伪元素清除浮动

<!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>Document</title>
    <style>
        .father {
            width: 200px;
            background-color: #ccc;
        }

        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .son {
            width: 50px;
            height: 50px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            float: left;
        }

        .three {
            background-color: orange;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="son one"></div>
        <div class="son two"></div>
        <div class="son three"></div>
    </div>
    <div style="width:200px;background-color: palegreen;">我是标准流</div>

</body>

</html>

image.png

avatar
文章
阅读
粉丝