CSS浮动float详解（一）：标准文档流

Web网页的制作，是一个流，必须自上而下依次进行。

标准文档流

流的比喻很形象，就像水流一样，必须从上而下，像织毛衣一样。

那么究竟什么是标准文档流呢？在web中，标准文档流有以下几个特点：

• 高矮不齐，底边对齐

  
• 自动换行

  无论字体大小有多高，图片大小有多高，底边始终对齐，而且会自动换行。

• 空白折叠现象

  <p>我叫Feathers                                        <img src="me.png">，人生没有什么追求，只有一个 <span>学习</span>! <img src="zb.jpeg">学习让我快乐!生命在于学习！一刻不学习就浑身难受！</p>

  这串代码是上方图片中的文档的源代码，我们看到，我们无论在文档中输入多少空格或者是回车，都会被折叠为一个空格，这个现象称作空白折叠现象。

文本级标签与容器级标签

HTML将html标签分为两类， 文本级 和 容器级。规定了标签的 作用，文本级标签只能存放文本，而容器级标签可以容纳其他容器，也可以容纳文本。

注意： 文本不仅仅是只文字，图片、链接等都是文本。所以，img标签既不是文本级标签，也不是容器级标签！只是使用标签的形式来表示图片而已。

文本级标签有： span, p, u, i, em, strong…

容器级标签有： div, h, li, dt, dd…

块级元素和行内元素

CSS将html元素分为两种 块级元素 和 行内元素。通过 display:inline/block 给元素设置默认的 样式，最主要的区别在于，块级元素占整行，而行内元素的宽度只会包裹内容。

• 行内元素

  • 元素不能设置宽和高，

  • 不能设置宽、高。默认的宽度，就是文字的宽度。

  • 常见的行内元素有： span, u, i, em, strong…

• 块级元素

  • 霸占一行，不能与其他任何元素并列

  • 能接受宽、高

  • 如果不设置宽度，那么宽度将默认变为父容器的100%。

  • 如果不设置高度，那么高度默认为包裹内容，或者说容器内的孩子会将容器的高度撑起来

  • 常见的块级元素有： p, div, h, li, dt, dd… 注意p虽然是文本级元素，但它时块级元素。

块级元素和行内元素之间的转换

因为行内元素和块级元素之间各有各的特点，各有各的表达效果。通常，我们可能需要给span标签设置一个宽和高，给让div标签并排，此时就需要使用到元素类型转换。

我们可以通过 display:block/inline 设置元素的类型，从而达到我们想要的效果。