> For the complete documentation index, see [llms.txt](https://yangsx95.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yangsx95.gitbook.io/notes/front-end/css/css-fu-dong-float-xiang-jie-yi-biao-zhun-wen-dang-liu.md). # CSS浮动float详解（一）：标准文档流 Web网页的制作，是一个流，必须自上而下依次进行。 ### 标准文档流 流的比喻很形象，就像水流一样，必须从上而下，像织毛衣一样。 那么究竟什么是标准文档流呢？在web中，标准文档流有以下几个特点： * **高矮不齐，底边对齐** ![](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-c44acc721c3f87dd33d77daf5aaeb6dc9f4a089a%2FaHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYxMjE1MjExNzExOTI0.png?alt=media) * **自动换行** 无论字体大小有多高，图片大小有多高，底边始终对齐，而且会自动换行。 * **空白折叠现象** ```

我叫Feathers ，人生没有什么追求，只有一个 学习! 学习让我快乐!生命在于学习！一刻不学习就浑身难受！

``` 这串代码是上方图片中的文档的源代码，我们看到，我们无论在文档中输入多少空格或者是回车，都会被折叠为一个空格，这个现象称作空白折叠现象。 ## 文本级标签与容器级标签 HTML将html标签分为两类， **文本级** 和 **容器级**。规定了标签的 **作用**，文本级标签只能存放文本，而容器级标签可以容纳其他容器，也可以容纳文本。 > **注意：** 文本不仅仅是只文字，图片、链接等都是文本。所以，img标签既不是文本级标签，也不是容器级标签！只是使用标签的形式来表示图片而已。 文本级标签有： `span`, `p`, `u`, `i`, `em`, `strong`… 容器级标签有： `div`, `h`, `li`, `dt`, `dd`… ## 块级元素和行内元素 CSS将html元素分为两种 **块级元素** 和 **行内元素**。通过 `display:inline/block` 给元素设置默认的 **样式**，最主要的区别在于，块级元素占整行，而行内元素的宽度只会包裹内容。 * 行内元素 * 元素不能设置宽和高， * 不能设置宽、高。默认的宽度，就是文字的宽度。 * 常见的行内元素有： `span`, `u`, `i`, `em`, `strong`… ![](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-0fe1aacd2e812820521c81d08a003e7003edf2ea%2FaHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYxMjE1MjMxNDE0NzY1.png?alt=media) * 块级元素 * 霸占一行，不能与其他任何元素并列 * 能接受宽、高 * 如果不设置宽度，那么宽度将默认变为父容器的100%。 * 如果不设置高度，那么高度默认为包裹内容，或者说容器内的孩子会将容器的高度撑起来 * 常见的块级元素有： `p`, `div`, `h`, `li`, `dt`, `dd`… 注意p虽然是文本级元素，但它时块级元素。 ![](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-65f72c172714f7ddee82dded9bb6c8a0fef47e09%2FaHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYxMjE1MjMxNTI2NDcw.png?alt=media) ### 块级元素和行内元素之间的转换 因为行内元素和块级元素之间各有各的特点，各有各的表达效果。通常，我们可能需要给span标签设置一个宽和高，给让div标签并排，此时就需要使用到元素类型转换。 我们可以通过 `display:block/inline` 设置元素的类型，从而达到我们想要的效果。