1、为什么要浮动？

首先我们需要知道为什么需要浮动元素。 HTML中的标签分为：块级标签、行内标签、行内块标签。 块级标签的排列方式与行内块标签和行内标签不同。 块级标签占据一行，而行内块元素和行内元素则排列在同一行。 仅当行已满或无法容纳元素时。 将显示一个新行。 因此，如果想要块级元素显示在同一行，或者想要设置元素的浮动对齐方式，就需要将元素浮动。 CSS中的float属性用于设置元素的浮动。 属性值是left和right，分别代表左浮动和右浮动。 浮动只能在当前父元素内浮动，浮动元素不能超过前一个兄弟元素。

块级元素不浮动时的排列方式。 Box 和 con 都是块级元素。 当它们不浮动时，它们显示在独占行上。

这是布局代码：

     <style>
        .outer{
            width: 400px;
            height: 250px;
            background-color: pink;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: #A9A3FF;
        }
        .con{
            width: 100px;
            height: 100px;
            background-color: #4eff58;
        }
    </style>
    

	    
box
	    
con
 

对于块级元素浮动后的排列，box和con都设置CSS样式float: left; 对于浮动后的显示效果，可以将块级元素显示在同一行中。

这是布局代码：

     <style>
        .outer{
            width: 400px;
            height: 250px;
            background-color: pink;
        }
        .box{
            width: 100px;
            height: 100px;
            float：left；
            background-color: #A9A3FF;
        }
        .con{
            width: 100px;
            height: 100px;
            float：left；
            background-color: #4eff58;
        }
    </style>
    

	    
box
	    
con
 

2、为什么要清除浮动？

浮动是一种常见的布局，但是如果不清除浮动，可能会导致很多问题。 最常见的浮动问题就是父级崩溃，而父级崩溃的原因是因为父级中的元素在浮动后会崩溃。 与文档流分开，文档流也称为普通流，是可实现元素在排列时在文档中所占据的位置。 浮动元素不属于文档中的普通流。 元素漂浮在普通流上，可以左右浮动。 由于浮动的特性，属于普通流的元素在设置浮动后不会在父级中设置。 在高度的情况下（实际开发中，一般不会给父元素设置宽度和高度），父元素的高度会是0，这就是我们所说的父高度塌陷。

下面结合上面两张图可以看出，当父级外层元素没有清除浮动且没有设置高度时，父级的高度为0，粉色区域消失。

     <style>
        .outer{
            width: 400px;
            /*height: 250px;不设高度*/
           /*overflow: hidden; 没有清除浮动*/ 
            background-color: pink;
        }
        .box{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #A9A3FF;
        }
        .con{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #4eff58;
        }
    </style>


    
box
    
con

**补充：在内联元素上浮动的效果，**具有float属性的元素可以设置宽度和宽度，支持-top/-和-top/-属性。 **块级元素浮动的效果，**可以在同一行显示。

3、清除漂浮物的常用方法

(1)伪元素清除浮动（推荐）

清除浮动伪元素的原理是在当前浮动元素的父级上添加一个after伪元素，并为after伪元素设置清除浮动元素的功能代码。

       .box{
            /* 下面代码中的*是css hack */
            *zoom:1;/*开启了haslayout  相当于开启了BFC，为了兼容IE浏览器*/
        }
        .box:after{
            content: "\200B"; 
            display: block;
            height: 0;
            clear: both;
        }

(2) 清除浮子

**:; ** 表示该元素超出隐藏状态，但是当不需要隐藏超出的元素时，可以使用该属性来清除浮动。 实际原理是开启BFC（块级格式化上下文），BFC是独立渲染。 区域，指定内部元素如何布局，对区域外的元素没有影响。 当元素开启 BFC 时，父元素可以包含浮动子元素。

(3) 空块级标签清除浮动

清除带有空块级标签的浮动的原理是在浮动元素末尾添加一个空块级标签，并设置css属性为clear:both; 当页面上有很多浮动元素时，不建议使用这种方法来清除浮动，因为需要添加多个Empty块级标签，增加浏览器运行的负担，而且页面代码也重复，这是不利于开发者开发和维护。

(4)

标签透明浮动

标签清除浮动的原理是添加一个

，清除=“全部”是

标签本身的属性与空块级标签清除和浮动类似，但很少使用。

（5）设置的宽高（不推荐）

虽然设置的高度可以避免浮动导致的崩溃问题，但不建议这样做。 设置高度的方法比较有限，在实际开发中我们很少设置父元素的高度，因为父元素的高度可以通过子元素来扩展，这样就减少了代码的重复，并且不需要计算父元素的高度父母，有利于发育。