CSS浮动

1.1.为什么网页布局需要浮动

很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认排列方式。

浮动最典型应用：让多个块级元素一行显示。

1.2.什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。

float：left-----元素向左浮动

float：right----元素向右浮动

float：none----元素不浮动

1.3 浮动特性（重点）

（1）浮动元素会脱离标准流

（2）浮动元素会一行内显示并且元素顶部对齐

（3）浮动的元素会具有行内块元素的特性（块级元素可以在一行显示）

  重要性质

1. 脱离文档流的控制移动到指定位置，脱标 脱离文档流的盒子，会漂浮在文档流的盒子上面，不占位置。

2. 如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列。 浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。

3. 浮动元素具有行内块元素特性。 任何元素都可以浮动，设置了后元素都具有行内块元素性质。

   • 若块级元素没有设置宽度，则默认和父级一样宽
   • 浮动盒子中间无间隙

1.4 浮动的应用

先用标准流上下排列位置，之后内部元素采用浮动排列左右位置

1.5清除浮动

由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。

解决方案

(1) 额外标签法

额外标签法是在最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;

<style>

.clear{ both;}

</style> <div class="clear"></div>

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化差

（2）父级添加overflow

overflow：hidden；

(3) after伪元素法

代码：

   .clearfix:after {

            content: "";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

        .clearfix {

            /* IE6、7 专有 */

            *zoom: 1;

        }

（4）双伪元素法

代码：

 .clearfix:before,

        .clearfix:after {

            content: "";

            display: table;

        }

        .clearfix:after {

            clear: both;

        }

        .clearfix {

            *zoom: 1;

        }

• 优点：代码更简洁
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯