浮动问题的解决方案（关于清除浮动问题的最全方法）

浮动（float）

普通流（normal float）

先来说一说普通流，通过此边可以理解为什么会有浮动了。
关于网页布局的核心即 就是用css来摆放盒子的位置。
然而css的定位机制有三种：普通流（标准流），浮动，定位。
那么什么是普通流呢？普通流即就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思。比如：一个块级元素会独占一行，行内元素会按照顺序依次排列。然而按照这种布局，就不会出现例外的情况。因此就可以用浮动效果来实现标准流情况以外的效果。

浮动的由来？

浮动最早是用来做文字环绕效果的。

如上代码所示：给图片添加浮动效果。

什么是浮动？

元素的浮动就是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。
在css中通过float属性来定义浮动。（标准定义）

一句话来总结浮动（float）

1.浮动定义：加了浮动的元素盒子在脱离文档流之后，会漂浮在标准流之上；
并且不占位置，它在浮起来之后，原来的位置就会漏给标准流的盒子；
浮动只有左右浮动。

浮动元素的主要目的

2.主要目的：就是为了让多个块级元素可以在同一行显示出来。

浮动元素的使用特性

3.特性：

• 在使用浮动元素时，首先要创建包含块的概念：注意结合父级元素一块使用，浮动的元素总是找理它最近的父级元素 对齐，但是不会超出内边距的范围。
  

• 浮动元素的排列位置：
  a. 跟上一个块级元素有关。给元素A设置浮动，如果元素A的上一个元素浮动，则元素A的顶部会和上一个元素的顶部对齐；
  
  b.如果上一个元素是标准流（不浮动），则元素A的顶部会和上一个元素的底部对齐。
  
  由此得出结论：在同一个父盒子中的子盒子，如果其中一个子级有浮动，其他的子级都需要浮动，这样才会在同一行对齐显示。

• 浮动元素改变元素模式：元素在添加浮动属性后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容是多少。

   <style>
        div{
    
            background-color:red;
            height: 200px;
            float:left;   /*块级元素添加浮动后，