背景

有两个div父盒子, 内部子元素是浮动的: css

<!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> * { padding:0px; margin: 0px; } .box, .box2 { width: 1000px; border: 2px solid red; } .box p, .box2 p { width: 100px; height: 50px; background-color:pink; float: left; margin-right: 10px; } </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
    </div>

    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>
</html>
复制代码

方法一: 设置父元素高度

添加父元素高度, 值等于子元素高度缺点: 若是浮动的子元素大小改变, 父元素不能自适应html

.box, .box2 {
            width: 1000px;
            height: 50px;
            border: 2px solid red;
            clear: both;
        }
复制代码

方法二: 给父元素添加clear属性, 清除标签元素自身受到的前面的浮动的影响

clear属性的属性值:浏览器

属性值	解释
left	清除前面左浮动带来的影响
right	清除前面右浮动带来的影响
both	清除前面左右浮动带来的影响

.box, .box2 {
            width: 1000px;
            /* 方法一: 设置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            clear: both;
        }
复制代码

缺点: 若是两个父元素间设置了margin, 会塌陷markdown

方法三: 外墙法/隔墙法

在两个父盒子之间添加一个div, 为div设置clear属性 ui

css:spa

.cl {
            clear: both;
        }
复制代码

<body>
    <div class="box">
        <p></p>
        <p></p>
    </div>

    <div class="cl"></div>
    
    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>
复制代码

优势: 能够用div的height模仿margin的高度缺点: 父盒子高度不能自适应3d

方法四: 内墙法

在父元素内部，全部的浮动子元素后面添加一个空的 code

元素，标签高度为 0，添加 clear 属性。

.cl {
            clear: both;
        }
复制代码

<body>
    <div class="box">
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
    <!-- 方法三: 外墙法 -->
    <!-- <div class="cl"></div> -->
    
    <div class="box2">
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
</body>
复制代码

优势: 能够解决全部问题, margin不会塌陷, 父盒子高度能够自适应orm

.box, .box2 {
            width: 1000px;
            /* 方法一: 设置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            /* 方法二: 父元素设置clear:both */
            /* clear: both; */
            margin: 10px;
        }
复制代码

缺点: 使用html的代码解决css的问题, 形成结构冗余htm

方法五: 伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器：经过选中的标签添加伪类，去选中标签的某个状态或位置。 :after：这个伪类表示选中的是某个标签内部的最后的位置。

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。将伪类添加给一个选中父盒子的选择器后面，通常给须要清除浮动的父盒子设置一个clearfix的类名。

.clearfix:after {
            content: "1";
            display: block;
            height: 0px;  /*不让文字1撑高位置*/
            clear: both;
            visibility: hidden; /*隐藏属性, 与overflow: hidden的区别在于它不会让出位置*/
        }
复制代码

<body>
    <div class="box clearfix">
        <p></p>
        <p></p>
        <!-- 内墙法 -->
        <!-- <div class="cl"></div> -->
    </div>
    <!-- 方法三: 外墙法 -->
    <!-- <div class="cl"></div> -->
    
    <div class="box2 clearfix">
        <p></p>
        <p></p>
        <!-- 内墙法 -->
        <!-- <div class="cl"></div> -->
    </div>
</body>
复制代码

能够解决全部问题

方法六: 溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，能够解决浮动的全部问题.

overflow属性:

元素高度设置后，overflow：hidden；效果是将超太高度的部分直接隐藏。
元素高度没有设置时，若是元素同时设置了overflow：hidden属性，元素会自适应内容的高度。

高度自适应缘由： 一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流仍是浮动，都会将最高的高度做为父盒子高度加载。

浮动不影响后面的元素： 父元素有了高度后，能够管理住内部全部的浮动元素，不会延伸到后面标签中影响贴边。

.box, .box2 {
            width: 1000px;
            /* 方法一: 设置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            /* 方法二: 父元素设置clear:both */
            /* clear: both; */
            overflow: hidden;
        }
复制代码

总结

若是父元素高度是固定的，建议使用 height 属性解决。
若是父元素高度须要自适应，建议使用 overflow 属性解决浮动问题。

CSS - 清除浮动影响的几种方式总结