Css布局系列-float 浮动_html/css_WEB-ITnose

准备讲一个布局系列由浅入深，先讲解一些基本属性理论，在通过实例与理论相结合，争取讲明白讲清楚。欢迎大家一起讨论，一起学习一起奋斗。废话少说，先去官方网站看看是怎么解释定义float浮动。

官方定义：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

看着这一些定义似懂非懂，要是真在使用的时候，还是有一些不懂的地方。现对其官方定义进行归纳总结一下他的特点：

 浮动主要是改变元素排列方向，脱离普通流。取值范围为left、right、none(不浮动)；

 浮动不占文档的位置，如果与非浮动块级元素重叠，浮动元素将会置顶层也就是最上一层；

 如果指定元素为浮动，该元素将会拥有inner-block特性且宽度将会变得尽可能地窄，建议指定一个宽度；

 指定浮动元素的方向后，当浮动元素碰到父级元素边框就会停止浮动或是碰到另一个浮动元素的边框同样也会停止浮动；

 如果指定浮动元素后，后续非浮动块级元素会紧跟着浮动元素后面，并会自动填充元素的宽度；

 假如浮动在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止（待验证今天太晚了）。

补充说明：普通流（也称标准流）规定元素是从左到右、从上到下顺序排列。

下面我们通过实例来逐一进行验证，当然不排除在某种特殊的情况下我的归纳总结不成立，不过我是没有想出来的。

1. 这个就不浪费时间；
2. 将div1设为向左浮动，你可以看到他与div2元素重叠，且div1在最顶层，并且也验证没有占用任何空间了，与元素设为绝对定位和z-index 效果是一样，但是要不尽完全相同，你可以看到div2文字要没有被覆盖住。真是一个让人捉摸不透浮动啊！

3.  将div1的高宽度去掉，他就会根据你的文字宽度自撑了，如果不给高宽度能有多窄就有多窄,其实与元素设为inner-block且不设定高宽度效果一样都是自撑，后续还会介绍该属性。在某种意义上来讲设置元素浮动与行内块是一个道理，只不过浮动是可以改变元素方向而已。

 

4.  设置div1 div2 两个元素向左浮动，根据我归纳总结的，如果浮动元素碰到父级元素的边框或碰到另一个浮动元素边框停止浮动。div1就是碰到父级元素容器的边框 、div2就是碰到div1的边框停止浮动，如果猜想有问题，应该是div2元素是要覆盖div1的元素，可是没有，证明我归纳是正确的。

5. 设置div1 元素向左浮动，根据我归纳总结的，如果指定浮动元素后，后续非浮动块级元素会紧跟着浮动元素后面，并会自动填充元素的宽度。其实div2的宽度是100%了，div1是浮动在div2元素上面的。上面说过浮动元素是不占文档任何空间的。