CSS：为什么清除浮动，清除浮动的方法（*****五颗星）

1.浮动的定义：

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

2.浮动的工作原理：

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”（浮动塌陷）现象）
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动塌陷问题（父级块没有设置高度引起的问题）可以设置父级块的高度来解决塌陷问题，但是因为后面不知道需要增加多少子模块，因此不知道父级块需要多少的高度，所以不建议给父级块设置高度。最好使用清除浮动（clear方法缺点：产生很多不必要的空元素；BFC方法：里面有很多方法）

3.浮动元素引起的问题：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

给要清除浮动的元素添加样式 clear，父元素结束标签钱，插入清除浮动的块级元素，给该元素添加样式 clear 添加伪元素，在父级元素的最后，添加一个伪元素，通过清除伪元素的浮动，

注意：该伪元素的 display 为 block，父元素添加样式 overflow 清除浮动，overflow 设置除 visible 以外的任何位置

4.清除浮动的方式如下：

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

• 给父级div定义height属性
• 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
• 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

浮动塌陷例子：

<style>
        .outer {
            width: 250px;
            background-color: red;
        }
        .inner{
            width: 100px;
            width: 50px;
            /* 因为outer没设置高，导致浮动（高度）塌陷，浮动元素不占空间，导致outer盒子撑不起来。*/
            float: left;
            background-color: rgb(18, 33, 207);
        }
    </style>

<div class="outer">
        <div class="inner">inner1</div>
        <div class="inner">inner2</div>
    </div>

解决浮动塌陷的方法：

方法一：（浮动元素后）使用带 clear 属性的空元素(缺点：产生很多不必要的空元素)

在浮动元素后使用一个空元素如<div class="clear"></div>，

并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。

亦可使用<br class="clear" />或<hr class="clear" />来进行清除。

<style>
        .outer {
            width: 250px;
            background-color: red;
        }
        .inner{
            width: 100px;
            width: 50px;
            /* 因为outer没设置高，导致浮动（高度）塌陷，浮动元素不占空间，导致outer盒子撑不起来。*/
            float: left;
            background-color: rgb(18, 33, 207);
        }
        /* 浮动塌陷解决方法 */
        .clear{
            clear: both;
        }
    </style>

<div class="outer">
        <div class="inner">inner1</div>
        <div class="inner">inner2</div>
          <!-- 浮动塌陷解决方法缺点：产生了