[CSS]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设置元素的类型，从而达到我们想要的效果。