html5文档流如何脱离

这篇文章主要介绍了html5文档流如何脱离的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html5文档流如何脱离文章都会有所收获，下面我们一起来看看吧。

胶州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

html5中，文档流又称“普通流”，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式；并且最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。脱离文档流的方法：1、float浮动；2、position定位。

本教程操作环境：windows7系统、PHP7.1版、DELL G3电脑

一、什么是文档流？

“流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。

那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。

当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。

二、块级元素与行内元素

块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），一般作为容器使用，常见的块级元素有：from、select、 textarea、h2-h7 、table 、button 、hr 、p 、ol 、ul等。

结合以上内容，块级元素拥有以下特点：

  • 每个块级元素都是独自占一行。

  • 元素的高度、宽度、行高和边距都是可以设置的。

  • 元素的宽度如果不设置的话，默认为父元素的宽度。

行内元素：显然，这种元素存在于一行内，且能与别的行内元素共同享有一行。常见的行内元素有：span、input、a、em、strong、b、br、img、select、button等。

那么行内元素拥有的特点如下：

  • 每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。

  • 行内元素设置width, height无效（此处有坑，请往下看），宽度随元素的内容而变化。

  • 行内水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

三、替换元素和非替换元素

细心的大家肯定发现了，像、、