五种前端布局之float布局

五种前端基本布局---table布局、float布局、absolute布局、flexbox布局、grid布局

float布局特性float布局的优缺点缺点优点

float布局特性

float 属性定义元素往哪个方向浮动。

图文环绕效果 float元素脱离了文档流，但是不脱离文本流 文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，上图中，p的区域其实是顶到了img的底下的，因为float让img脱离文档流，但是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，所以从这里也可以看出float的脱离文档流不是完全脱离。

对自身的影响：形成“块”（BFC–块格式化上下文） .位置尽量靠上 .位置尽量靠左(右)

(1) 两个float元素宽度之和刚好等于父级元素宽度、以及所有子级元素宽度之和大于父级元素宽度的情况：

上面的两个代码块运行后的结果是一样的，结果如下：

结果如下：

(2)所有子级元素宽度之和小于父级元素宽度的情况：（所有情况的结果都一样）

对兄弟元素的影响 .上面贴非float元素（一般float元素上面贴的都是非float元素） .旁边贴float元素（靠左，或者靠右的时候贴float元素） .不影响其它块级元素位置 .影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）

对父级元素的影响 .从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高） .高度塌陷（因为在父级的空间里消失了，所以父级的高度有可能会塌陷，防止父级的高度塌陷的办法就是设置父级属性：overflow）

我们看到float元素的宽高是有100像素的，但是main的高度却是0，没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow，创建一个BFC。

float 的两栏布局和三栏布局

注意：如果给非float元素加上宽度，一定要记得给此元素加上margin-left/right属性，否侧会出现下面的情况（非float元素会被float元素覆盖住一部份）。

正确代码应该是：

float布局的优缺点

缺点

脱离文档流，需要清楚浮动，*高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在对高度计算的时候会忽略浮动的元素）。

优点

兼容性好，比较简单