CSS布局——float

引言

float即浮动。实质上就是为了让块级元素能够在一行显示。设置了float属性的元素会脱离标准文档流。那什么是标准文档流？标准文档流就是指元素默认的方式显示，从上到下，从左到右排版。比如，块级元素占据一行显示，行内元素在一行显示。

一、float的属性值

       1、左浮动：float:left；以左边为基准，盒子并排紧贴显示在一起。

       2、右浮动：float:right；以右边为基准，盒子并排紧贴显示在一起。

       3、不浮动：float:none;

二、元素float后的特点

        1、脱离文档流：浮动的元素不占据原来在标准流中的位置

        2、出现模式转化：盒子不再区分块元素，还是行内元素；浮动的块级元素会在一行显示，以顶端对齐，一行显示不下的会换行显示；行内元素可以设置有效的宽高值（行内元素默认情况下，宽高值的设置是无效的）

三、元素float后引发的问题

       1、导致父盒子的高度为0：当父盒子没有设置高度的时候，子盒子都设置浮动之后，会导致父盒子的高度为0。

       2、会影响后面的盒子的排列

四、如何清除浮动

       1、给父盒子设置高度

       2、给父盒子设置overflow:hidden

       3、外墙法

       4、内墙法

       5、伪元素

下面是float的一个应用小例子：https://github.com/ducaifeng86/CSS-Practice

效果如下：