11-清除浮动含义：清除浮动带来的影响原因：子元素浮动后脱标→不占位置目的：需要父元素有高度，从而不影响其他网页元素

清除浮动介绍

含义：清除浮动带来的影响

原因：子元素浮动后脱标→不占位置

目的：需要父元素有高度，从而不影响其他网页元素布局

方法一、直接给父元素设置高度

优点：简单粗暴
缺点：某些布局中不适用。如：新闻列表、京东推荐模块，不适用设置高度

在这里插入图片描述

方法二、额外标签法

操作方法：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点：会在页面中添加额外的标签，会让页面的HTML结构变的复杂

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear{
        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: 400px;
            background-color: pink;
        }
        .son {
            float: left;
            width: 100px;
            height: 400px;
            background-color: blue;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            /* 使其伪元素在网页中隐藏看不见 */
            height: 0;
            visibility: hidden;
            /* 若需清楚浮动只需给标签加上类clearfix即可清楚浮动 */
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
</body>
</html>

方法四、双伪元素清除法

操作

<!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: 400px;
            background-color: pink;
        }
        .son {
            float: left;
            height: 400px;
            width: 100px;
            background-color: blue;
        }
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
</body>
</html>

优点：项目中使用，直接给标签加类即可清除浮动

方法五、给父元素设置overflow : hidden

操作：直接给父元素设置 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: 400px;
            background-color: pink;
            overflow: hidden;
        }
        .son {
            float: left;
            height: 400px;
            width: 100px;
            background-color: blue;
        }
  
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>