你真的懂float吗？

1、前言

相信很多人都用过float属性，也知道float是干嘛的，但是在实际项目中有时候用起来往往不是想象中的结果，或者对为什么出现这样的结果不理解。

现在我也来浅谈一下float相关的事情，

请大家不要吐槽，积极给予我掌声，我会表面拒绝的，然后内心欣然接受你们的掌声。

2、属性列表

float有四个属性，具体属性的意思我就不说了

3、浮动元素显示规则

3.1、对于它的父元素来说，浮动元素是不存在的

一个元素如果仅仅有一个浮动元素为子元素的话，父元素的宽高会收起来（浮动元素不会撑起父元素的宽高）：

例子1-1：

3.2、一个浮动元素的位置会尽可能的靠近他父元素的左上角或者右上角

float: left的元素会尽量靠近父元素的左上角

float: right的元素会尽量靠近父元素的右上角

例子2-1：

3.3、 浮动元素前面定义的元素会把浮动元素挤到下面

尽管浮动元素会尽可能的靠近父元素的左上角或者右上角（规则2），但是如果浮动元素前面有相邻元素的话，不管是inline的或者block的，都会把浮动元素挤到下面。

例子3-1：浮动元素前面无元素的情况：

例子3-2：浮动元素前面有元素的情况：

3.4、先声明的浮动元素有优先靠近父元素左上角或者右上角（规则2）位置的权利

如果一个父元素有多个浮动子元素，前面声明的浮动元素会更靠近父元素的左上角或者右上角

例子4-1：有三个浮动子元素的情况

3.5、规则2的拓展

如果有多个相同方向的浮动元素，浮动元素也会尽可能的靠近左上角或者右上角，直到父元素宽度没法放下这个元素的时候，这个元素才会被挤下去。

例子5-1：

3.6、inline元素添加浮动属性会拥有block特性

可以添加宽高等。

3.7、浮动元素不会跑出父元素的边界

这里是相对来说的，float:left元素不会跑出到父元素左边界的外面，不像position: absolute元素可以跑到父元素的外面。

例子7-1：

原文：http://div.io/topic/1278

《前端观察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号，也可以关注微信订阅号qianduanguancha（长按可复制）