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

这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《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

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。

Q1974808066
微信公众号：design-Rabbit
HTML&CSS&JS兴趣Q群805366477

兔儿屋设计坊主要用于，平面设计、网页制作、移动UI、插画艺术，方面的学习交流和吸收工作经验及找工作面试使用。兔儿屋设计坊QQ群是由，爱生活、爱艺术、爱设计、爱学习、坚强不息勇于面对各种社会生活压力的，社会各阶层的，下岗工人、农民兄弟，等设计爱号者，组成。兔儿屋设计坊QQ群的小伙伴们对设计和艺术没有，高端大气上档次，酷炫霸气吊爆天的梦想，只是普实无华真挚无添加的喜欢。

运行综合代码2，就可以看到图2的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图2页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

图2

从图1和图2中的对比，我们就可以轻松的看出脱离效果，图2中最下方的大方框脱离文档流后，整个浮动上第三个方框，第三个方框靠右边被字体环绕。

好！杰哥CSS3学习笔记分享到这里，要知后事如何请关注、分享、收藏，如果喜欢请打赏。