1. Float basics 浮动基础
在了解浮动之前,要先了解文档流。文档流是正式输出的流。元素在前面的元素先输出。元素写在后面的后输出。块级元素占满一行。内联元素按内容的大小占空间。且不占一行。文档流有别于浮动流。根据w3school规定,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。如下:
这个黄色的框在左浮动后,他下面的文字p元素就上来了。(为什么上来,因为p元素忽视浮动框的存在。P是文档流。黄色框是浮动流。)这样,他和黄色框是在同一行。文字照顾到框的存在所以向后缩进。其实<p>是也占一行的。但是它忽视黄色框的存在。按正常的文档流输出。Float以前主要是用于文字环绕图片的效果。