web学习总结之布局

浅谈web布局中的“float”属性　　

　　对于刚学习web前端的同学，布局和排版都是一个难点。虽然我们能够通过各种调试实现我们希望得到的页面效果，但是如果不把其中的道理弄清楚的话，在下次布局的时候，也无法对整体页面有一个比较全面的掌控。只要弄清楚其中的道理，实现页面的良好布局并不是一件特别难的事情。下面，我就谈谈我学习布局的经验~初来乍到，多多指教~！

1.理解“流”

　　要学会web布局，首先要理解“流”的概念和工作原理。“流”，形象一点说，就像水流一样，浏览器从html文件的开头，把元素流入页面中，块级元素独占一行，内嵌元素共享一行，按html文件中的顺序一个接一个的把它们“流”到页面上，直到将最后一个元素放到页面上，这就是我们常说的“正常文档流”。这是浏览器默认的元素放置方式。这些元素按照它们的规则和顺序被放置在同一层中。

块级元素独占一行，内嵌元素共享一行

　　很简单，块级元素在文档流中前后都有换行，故独占一行。而内嵌元素呢？内嵌元素会在水平方向上一个接一个地流，从左到右直到没有足够的空间，就流到下一行。

2.“float”浮动的原理

　　在我们的布局工具中，有一个叫“float”属性，意思是“浮动”。“float”属性有两个值：“left”、“right”。简单来说，“float”属性就是让一个元素尽可能的靠左或靠右。既然叫做“浮动”，那么它当然是漂浮在正常文本流之上的。因此，它脱离了正常文本流，然后再文本流之上，尽可能的浮动到左（右）边。那么，原先页面中的元素会如何放置呢？

　　就像湖里的水流一样，你从中舀走一碗，旁边的水流就会填充过来，湖面还是如镜面一般平坦。当文本流中的一个元素被“float”漂浮起来时，跟在它后面的元素就会填充它原本的位置。

对于正常文档流中的元素，被“float”的元素就像不存在一样。你甚至会发现，浮动元素遮住了下面正常文本流中的块元素。注意！正常文本流中的内嵌元素可不同，当内嵌元素遇到浮动元素时，它们会包围在浮动元素边界的周围（最初“float”就是用于实现文字环绕图片的效果的）。

3.使用“float”，你还需要知道：

　　“float”属性浮动的位置跟你的html文件中添加了“float”属性的元素的位置顺序有关，浮动元素只会跟在它的上一个元素（html文件中，浮动元素的上一个元素）后面进行浮动。