同行们。文章把前端相关的术语都用设计师熟悉的东西解释一遍，通俗易懂幽默风趣，基于上一篇，要让div乖乖“听话”，今天来应用和深挖float这个属性。

　　div是带着霸道基因出生的(不明白的请先看完上一篇哦)，其实它主要是还没有碰上能征服它的你吧!哈哈……今天带大家来把他拿下。

　　好吧，我承认“附加样式”这个词不知道是从哪儿看的还是我自己这么叫的，我们之后就分为样式和默认样式吧。

　　在第一个矩形中加入一条新样式：float：left;(即向左靠，遵循我们的写字习惯从左往右排吧，你也可以试试向右靠)

　　嗯，你问我讲这个干嘛?再教你一个属性：opacity(透明度)，其后跟的是小数，0.5即表示50%透明度。

　　如果你去验证了，你会发现这个颜色就是我们在PS里降低黄色透明度与蓝色相交得到的颜色。也就是说：

　　至于为什么会被遮住，这是跟float这个属性相关的。float直译过来即是浮动的意思，也就是添加了float属性的小黄实际上是浮起来了，所以原先它“站”的位置就空了，小蓝“篡位”而上占据了小黄原来的位置。就像图层一样，上面的图层会遮住与它自身一样大小的面积，所以后来的小蓝永远不能与小黄“平起平坐”(呜呜呜……你是我无法企及哒)。但是你光在蓝色矩形上加浮动属性又没有用，div天生的霸道基因不允许……不信你试试，哈哈……

　　好啦，可以自己尝试多画点大小不一的矩形，让他们排一下，不过不是所有的都能好好排的。在html中，body的大小虽然是无限的，可是你的屏幕也只能显示那么点东西做再宽有什么意义呢。除了现在很流行的满屏网页，一般网页都会规定宽度而不会规定高度。你可能经常见到有竖滚动条的网页，但是横向滚动条的几乎没有(除非你的设备屏幕小于一般PC屏幕或者把网页放大了几倍等其他原因)，所以也可以说网页大小是和你浏览器显示区域有关。

　　所以许多网站会取一个多种屏幕都适用的内容宽度，也就是做webUI时你留的有效内容区域(常见的有1200px、1001px等)。开发人员会根据你的尺寸来确定一个最大宽度来排版。

　　多画几个高度一样宽度不一的矩形，为它们都加上向左浮动的属性(float：left;)缩小你的浏览器宽度，你会发现，它们不会一直呆在第一排，有时候竟会换行。当最右边的距离不足以放下它，他就会选择换一行。这也是现在响应式网站的奥妙之一，同一个网页，PC和手机都可以浏览，且布局会有所改变但不影响内容。如下图：

　　所以float这个属性是html中非常重要的一个属性，花的篇幅比较长。所以今天其实就讲了float一 个东西，透明度(opacity)和颜色那些顺带提一下。仿网页排版布局今天就不讲了，下次更新讲排版!

　　网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

　　随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...

　　每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...

　　今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...

　　你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...

　　Sunny萧萧：本文作为小白入门级，相对基础，是写给现在想了解一点前端知识的设计师同行们。文章把前端相关的术语都用设计师熟悉的东西解释一遍(比如比喻成画布)，通俗易懂幽默风趣，绝...