清除浮动方法总结-优快云博客

本文链接：https://blog.youkuaiyun.com/SuperluminalSnails/article/details/52624600

1.给父级加上高度

严格说来不能算是清除浮动，不过可以达到同样的布局效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;height: 220px;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>
</html>

这里写图片描述
缺点：要已知子元素高度，扩展性差

2.给父级加浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;float: left;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>
</html>

这里写图片描述
缺点：父级脱离文本流，会影响到布局。

3.为父级别加上display:inline-block

实际就是让父级成为一个BFC

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;display: inline-block;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>
</html>

这里写图片描述

4.空标签清除浮动

在浮动元素后面加上一个空标签，然后加上样式clear:both即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    .clear{clear: both;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>

        <div class="right">
            right
        </div>
        <div class="clear">

        </div>
    </div>
</body>
</html>

这里写图片描述

5.：after伪类等清除方法

原理和4相同，只不过用的是伪类，看起来高大上

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    .parent:after{display: block;content: '';clear: both;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>

        <div class="right">
            right
        </div>
    </div>
</body>
</html>

这里写图片描述

6.为父级加上overflow:(除visible以外的值)

还是使得父级成为BFC

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;overflow: auto;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>

        <div class="right">
            right
        </div>
    </div>
</body>
</html>

这里写图片描述

7.为父级加上postion:(除relative和static)

还是使得父成为BFC

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    .parent{border: 5px solid black;position: absolute;}
    .left,.right{width: 200px;height: 200px; background: red;float: left;margin: 10px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left
        </div>

        <div class="right">
            right
        </div>
    </div>
</body>
</html>