切图仔基础篇————浮动问题浅析

前言：

新人在刚开始不熟悉页面布局的时候，浮动这一关一定是必过的关卡。

为了以后能够更清楚的明白浮动，本次分分享浮动的原理及常用的解决办法。

浮动float属性值

left：左浮动

right：右浮动

none：默认值,元素不浮动;

inhert：规定从父元素继承float的属性值;
复制代码

浮动原理简述

HTML是一种排版方式，遵循从上到下，从左到右的方式，依次排列。

float浮动属性，让DOM从原本的排布中拖了出来，放在了一个上层的一个独立容器上。

这种感觉，可以类比ps中的分层做法，float属性将页面的内容单独的分离出来了。

脱离了文档流之后，原本的位置便是空的。

这也是自适应高的父元素会塌陷，兄弟元素会挤过来的原因。
复制代码

浮动引发的问题

问题：

1，如果父元素不设置高度，会引起父元素塌陷

2，元素浮动，引起同行兄弟元素占位，导致页面错乱
复制代码

常见解决办法

1，直接给父元素设置高度：

2，使用clear:both清空浮动：（如果不清楚这个属性是干什么的，可以去W3C官网看看，很容易理解的）

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>

 在底层的最后一个浮动DOM元素下，写一个<div style="clear:both;"></div>，清除浮动即可；
复制代码

3，给父元素加overflow:hidden;

原理：float是脱离文档流的，但是使用了overflow之后，浮动的元素会被继续包裹到父元素中。

于是，浮动元素便有了浮动的属性同时，又不会脱离文档流。

缺点：IE6不支持，可是IE6连自己的官方都懒得管了，谁在做项目的时候会遇到这么傻逼的版本

而且由于overflow的属性问题，如果子元素大小超过父元素大小，出被隐藏。
复制代码

4，给父元素添加浮动，父子元素一起浮动，就没问题了;

缺点：谁用谁傻逼，这是邪道，如果不是实在没招了，不建议用，会影响到父元素后面的元素的位置。

而且如果父元素绝对定位，浮动不起作用。
复制代码

浮动元素使用经验：

1，左(右)浮动元素，尽量靠近父元素左(右)内边沿。
2，浮动元素尽量不去重叠交叉。
3，浮动元素尽可能高，当不会高于父元素顶内边沿。
4，如果要是靠着左右浮动布局，一定要先浮动右侧的元素，再浮动左侧的元素。
复制代码

参考链接1：blog.csdn.net/xingxing182…

参考链接2：www.ruanyifeng.com/blog/2009/0…

结语：

以上两个链接，我都看过，没有必要学那么多花里胡哨的清楚浮动方式。

办法的存在，本来是为了解决问题而生的。

如果解决问题的方法，多到使用者都感到厌烦，那还不如使用那几个最常用的就好。

最重要的一点，你需要了解，什么是浮动。

最后的最后：欢迎指出不足，来打脸。