float初识

一：float初印象

float是h5中css样式中的一个属性，float 属性定义元素在哪个方向浮动。

属性值

以往这个属性总应用于图像，使文本围绕在图像周围。

代码

效果图

拓展：当文本内容是英文时，上面的代码运行结果会出现问题，如下：

 代码

效果

导致此现象的原因以后会详细说明，解决办法是给p标签设置一个css样式即可：

                                                  word-break: break-all;

效果图

需要了解的是现在基本上已经遗弃了float的此种用法，随着技术的发展和完善，float更多的是用作对元素位置的浮动以达到我们想要的目的。下面我们侧重谈谈float属性对行、块级标签的总用和影响。

二：float属性对块级元素的影响

①简单举个例子：

效果图

在一个有着10px边框，宽600px(随便设的，没特殊含义)的.divOut里装一个宽高100px的.divIn，此时.divOut的高被.divIn撑起，现在给divIn设置

                                                               float: right;

效果图

会发现.divOut此时高为0，说明浮动让.divIn脱离了文档流，不能再撑起父级元素的高度，这种现象我们叫做  页面塌陷  (解决方案后面说)。

②当有多个元素时：

例子

我们给粉色和蓝色div设置

                                                              float: right;

效果图

可以发现浮动元素向着浮动方向移动，直到碰见边界或者其他浮动元素时停下，且浮动元素原来的位置会被后面相邻的非浮动元素填充，使父级的高度受到一定的影响，大多数情况下这都不是我们愿意看到的。

三：清浮动(消除(页面塌陷)float属性对父级元素的影响)

①给父级一个高度，如二中第一个例子，给.divOut设置

                                                        height：100px；

效果图

由于我们最开始并不知道某一部分内容的高度，让这种方法大打折扣。

②clear属性

属性值

特点：只能清除之前元素的浮动问题。

这就要求我们要在最后面添加一个新元素用于清除前面的浮动问题

③伪类清浮动。

问题图

设置三个一样大小的div，全部设置左浮动

伪类清浮动

 效果图

了解以上两种方法的弊端，很容易理解此种方法的好处，这也是如今主流的清浮动的方法，伪类的用法很多，这只是一小部分，以后会挑一些常用的作详细说明。