《css设计彻底研究》读书笔记之 float 浮动原理

一、定义

　　css中有一个float属性，他的属性值：

　　　　none : 默认属性，未定义float时，即为none，也就是标准流通常的情况

　　　　left : 左浮动，元素会向其父级的左侧靠紧，同时，元素本身的宽度不再伸展，而根据元素内部的内容的宽度来确定

　　　　right : 右浮动，元素会身其父级的右侧靠紧，同时，跟左浮动一样，元素本身的宽度不再伸展，而根据元素内部的内容的宽度来确定

二、通过实例看原理

　　首先，我先了写这样一段代码，用来作为实验用：

　　css:

1 .wrap{border:1px solid #f00; padding:5px;}
2 .box-1{border:2px dotted #0f0; background:#ccc;}
3 .box-2{border:2px dotted #00f; background:#ccc;}
4 .box-3{border:2px dotted #0ff; background:#ccc;}
5 .text{border:2px dotted #000; background:#eee;}

　　html:

1 <div class="wrap">
2     <div class="box-1">box-1</div>
3     <div class="box-2">box-2</div>
4     <div class="box-3">box-3</div>
5     <p class="text">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
6 </div>

　　在浏览器中的表现:

　　现在实验开始，我先给box-1加个float:left;属性，则在浏览中的表现形式为：

　　这里有个很关健的地方，就是我们要先确定box-1和box-2两个div之间的位置关系，其实，此处由于box-1设了float:left；所以box-2自动顶替原先box-1所占位置，并且box-2的文字环绕住box-1，也就是说，类似于box-1盖在了box-2上面，且使box-2的文字环绕box-1元素，如果到这里还不清楚，我们可以再给box-2加个float:left,在浏览器中的表现形式为：

　　可以发现，由于box-2设置了float:left,所以box-3顶替了原来box-2的位置，并使自己的文字环绕box-2，如果我们再给box-3也设个float:left，也会产生相同的效果，即：

　　有人可能会认为后面的原素并没有顶替掉box-3的位置，而是向下偏移了一段距离，这其实是下面元素本身的问题，因为下面的元素是个p标签，而p标签本身表示段落的意思，他是有默认的margin值的，所以，只要给p设置一个 margin:0; 就会回归到我们想像中的样子，如图:

　　同理，float:right，也是相同的原理，大家若有兴趣可以自己验证一下

转载于:https://www.cnblogs.com/zhupinglei/archive/2012/05/09/2493396.html

《css设计彻底研究》读书笔记之 float 浮动原理相关推荐

CSS设计指南（读书笔记 - 选择器）
本文转自william_xu 51CTO博客,原文链接:http://blog.51cto.com/williamx/1142763,如需转载请自行联系原作者
CSS设计指南（读书笔记 - 背景）
本文转自william_xu 51CTO博客,原文链接:http://blog.51cto.com/williamx/1140006,如需转载请自行联系原作者
领域驱动设计DDD之读书笔记
查看文章领域驱动设计DDD之读书笔记转载原地址:http://hi.baidu.com/lijiangzj 2007-08-17 16:53 一.当前Java软件开发中几种认识误区 Hibe ...
Redis 设计与实现读书笔记（菜鸟版）
Redis 设计与实现读书笔记(简略版) 写在前面第一章(内部数据结构) SDS List Dictionary Rehash Rehash 与 COW 渐进式Rehash 字典收缩 Skipli ...
【读书笔记】游戏开发原理
游戏开发原理读书笔记 Contents 游戏开发原理读书笔记一.游戏与游戏设计 1 游戏类型与平台 1.1 类型和子类型 1.2 出品类型 1.3 平台 1.4 图形类型 1.5 交付方式 1.6 ...
读书笔记：理论生态学原理及应用（一）——合作的机制
此篇读书笔记对应于<Theoretical Ecology Principles and Applications>第三版第二章--How populations cohere: five ...
《CSS 禅意花园》读书笔记1
最近有点忙..但有的事情开始写博客就不能停下来. <<CSS 禅意花园>>读书笔记1(基础篇---------上) 在假期中买一本<<CSS 禅意花园>> ...
《H5 移动营销设计指南》读书笔记整理
一个前端工程师最近迷上了营销类的H5页面,被五花八门的H5页面迷的眼花缭乱,兴趣使然,于是买了一本<H5 营销设计指南>,看完以后对营销类的H5页面有了更深的理解,感觉很实在,所以参考读书 ...
【软件设计】5本软件设计书籍的读书笔记
文章目录前言 1.<简约之美:软件设计之道> 1.1 软件设计的准则 1.2 小结 2.<软件设计精要与模式> 2.1 软件架构 2.2 软件设计 2.3 软件设计模式 2. ...

《css设计彻底研究》读书笔记之 float 浮动原理

《css设计彻底研究》读书笔记之 float 浮动原理相关推荐

最新文章

热门文章