网页中的文本流和Float属性详解

网页中的文本流和Float属性详解

最近重新看了下Html的基础教程，有些东西感觉当时就没有仔细去看，只是知道有这么个东西，但是一操作起来就蹩脚，各种不行。比如制作一个简单的3分栏的Div+Css排版都搞不定。下午咨询了一下一位小伙伴，细细的把它了解了，现在把了解的写下来，以备分享。

我原本是想做这样一个布局： 

可是做出来却成了这样：
 
请仔细观察区别：上面的图一bottom（下面绿色的框）的div是在下面的，但是在图2中，它却将上面的三个框全部“包”住了 ，这就是区别。
具体Css代码和Html代码是这样的：
  


最后是怎么解决的呢，其实只要在bottom的样式里加这么一句话就可以了：


至于是为什么，其实很简单，就是因为前面设置了漂移，后面没清除漂移，所以就把bottom以流文本的形式处理了。
其实还有两个解决方法，一种是给上面的三栏内容再套一层， 还有一种是给bottom也带上漂移。

这些东西看似很简单，但是背后的原理不一定都说得清楚。要想本质上理解，那还是要了解一下“文本流”和“Float属性”。
网上有很多介绍这个的文档，但是要么写的有点复杂，要么太长，没心看。我希望简单的解释清楚这个问题。

先说文本流。
其实到目前为止，都没有一个准确的定义去说明文本流到底是什么。但其实这个理解起来比较简单，就像一句话是一个字一个字依次排列组成的，文本流也是这样，就是一个内容一个内容从左到右依次排列的。这些内容之间，如果没有特殊条件，是紧挨着的，一行一行的排列着的，不可能在相邻内容间出现空格或其他的什么，就像流水一样，是连续的，不可能从中间断开。这就是文本流。

再说Float属性。
这是一个完全脱离文本流的属性，也就是我们上面说到的“特殊条件”，当你设置一个左漂移（float：left；）再设置一个右漂移（float：right；）的时候，它们两个内容之间就会出现空隙，而float，就是控制这个特殊条件的属性。

现在我们回过头来看前面的那个布局。因为div是带有文本流属性的行元素，当header的div完了后，文本流就自动转到了下一行。但是从下面开始，都是带有float属性的3个content的div，它们是完全脱离文本流的，也就是说它们的位置不会对文本流光标的位置产生影响 ，文本流的光标位置还是在header换行之后的那一行。这时候，你加入一个不带float属性的bottom进来，文本流自然就继续向下布局了。也就是紧跟着header的下一行。

而上面的解决方式clear:both;是怎么的呢？
CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 
也就是说，这个标记会指出上面带float属性的3个框的物理位置，也就是尽管你们完全脱离了文本流，但是我通过这个标记就告诉了文本流给你们在文本流里在header后面留下属于你们的位置，这样，bottom就会在你们之后再继续布局了，而不是紧跟着header。这就是原因。

Ps：对于老手这也许根本不算问题，但对于像我这样的新手真是很苦恼啊。这个概念在相对定位和绝对定位的时候也会用到，希望能帮助到正在学Html的人。