CSS Float(浮动)的原理和工作方式，以及浮动造成的问题总结

---

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

 

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

 

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

 

Example验证:

1、浮动元素之后的元素将围绕它，浮动元素之前的元素将不受到影响

 这里前面两个div (aaa,bbb)没有收到浮动影响，浮动图片后面的两个div（ccc,ddd)要围绕浮动元素布局，而且浮动元素没有撑开父元素高度。

怎么个围绕法？可以这么理解，后面的元素从去除浮动元素占据的空间后开始围绕布局（默认static布局）！一般浮动元素不会撑开父元素的高度，但是也可能会帮助撑开父元素的高度！对比上一图和下一图可知，看下图：

2、clear 属性规定元素的哪一侧不允许其他浮动元素

这里的div(ddd)设置了两侧清除浮动，即div元素ddd两侧不能出现浮动。

span元素设置清除浮动有效吗？ 答案是无效！看下图：

 

3、浮动导致的常见问题请参考