学习CSS3笔记——脱离文档流float 学习CSS3笔记——脱离文档流

这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。
一边整理《JavaScript》教程,一边在网上和女粉丝侃大山。突然间，一个说自已是从辽宁盘锦来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”。
我问：“你们都想学啥？”。
女粉丝说：“陈老师！我想了解脱离文档流float。“下面就给大家讲下。
前面讲过三种脱离文档流方法分别是float、absolute、fixed期实我们初学者只要了解一种float浮动脱离文档流就够了，等以后有须要在研究别的脱离文档流方法。
什么是浮动float
float浮动会改变一个正常流布局，浮动某个标签元素会把某个标签元素从正常文档流中移出，但是他还是会想像中布局。
浮动应用于所有的元素。当一个元素浮动时，其他内容会“环绕”该float浮动元素。如语法1。

float :...值...

float的作用
css语言中，float属性有三个常用值，分别是none（不浮动）、left（靠左浮动）、right（靠右浮动）。如表1。

float 参数	值
none	对象不浮动
left	对象浮在左边
right	对象浮在右边

正常文档流和脱离文档流代码对比
先设计一个正常文档流代码，再设计一个float浮动脱离文档流代码，看下这两者的曲别。
正常文档流代码
使用css语言和html语言，设计一套正常文档流代码实现的默认效果，如图1

学习html5笔记,正常文档流,微信公众号：design-Rabbit - 锐客网/*定义父元素样式*/ #Q1974808066 { width:380px; background-color:#FFCCCC; border:2px dashed silver; }/*定义子元素样式*/#Q1974808066 div { padding:10px; margin:15px; border:2px double red; background-color:#FCD568; }/*定义文本样式*/#Q1974808066 p { margin:15px; border:2px dashed red; background-color:#FCD568; }#QQQ2838697670 { /*这里设置QQQ2838697670的浮动方式,现在不设置*/ }Q1974808066 微信公众号：design-Rabbit HTML&CSS&JS兴趣Q群805366477兔儿屋设计坊主要用于，平面设计、网页制作、移动UI、插画艺术，方面的学习交流和吸收工作经验及找工作面试使用。兔儿屋设计坊QQ群是由，爱生活、爱艺术、爱设计、爱学习、坚强不息勇于面对各种社会生活压力的，社会各阶层的，下岗工人、农民兄弟，等设计爱号者，组成。兔儿屋设计坊QQ群的小伙伴们对设计和艺术没有，高端大气上档次，酷炫霸气吊爆天的梦想，只是普实无华真挚无添加的喜欢。

运行综合代码1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。
注：看到图2页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

文章图片
图1 图1这个效果是没有使用脱离文档流的效果，用来和后面图2的脱离文档流做对比。
嵌入脱离文档流代码案例

#QQQ2838697670 { /*这里设置QQQ2838697670的浮动方式*/ float:right; }

把前面设计好的css语言1，嵌入到前面设计好的综合代码html5基础框架中。如综合代码2。

学习html5笔记,脱离文档流float,微信公众号：design-Rabbit - 锐客网/*定义父元素样式*/ #Q1974808066 { width:380px; background-color:#FFCCCC; border:2px dashed silver; }/*定义子元素样式*/#Q1974808066 div { padding:10px; margin:15px; border:2px double red; background-color:#FCD568; }/*定义文本样式*/#Q1974808066 p { margin:15px; border:2px dashed red; background-color:#FCD568; }#QQQ2838697670 { /*这里设置QQQ2838697670的浮动方式*/ float:right; }Q1974808066 微信公众号：design-Rabbit HTML&CSS&JS兴趣Q群805366477兔儿屋设计坊主要用于，平面设计、网页制作、移动UI、插画艺术，方面的学习交流和吸收工作经验及找工作面试使用。兔儿屋设计坊QQ群是由，爱生活、爱艺术、爱设计、爱学习、坚强不息勇于面对各种社会生活压力的，社会各阶层的，下岗工人、农民兄弟，等设计爱号者，组成。兔儿屋设计坊QQ群的小伙伴们对设计和艺术没有，高端大气上档次，酷炫霸气吊爆天的梦想，只是普实无华真挚无添加的喜欢。

运行综合代码2，就可以看到图2的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。
注：看到图2页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。