理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下：
流是html的抽象概念，隐喻这种排列布局方式自然自动，就像水流一样。流体布局是html默认的布局机制。如果你写的html不使用css，默认情况下(div等块级元素)从左到右(span等内部元素)堆砌的布局方式。
CSS定位在布局的时候绝对是一大主力，从css1的浮动到css2定位支持远胜对其他的支持到现在css3定位的稳定，css的定位的地位不言而喻。
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
一、Position各属性值详解 1. static ：默认值，元素将按照正常文档流规则排列。 2. relative ：相对定位，元素仍然处于正常文档流当中，但可以通过left、top、right和bottom的CSS规则来改变元素的位置。 注意点：[a]. 元素原来位置将保留，不被其他元素所占据; [b]. 当使用left，top改变元素位置时，元素将以原来位置的border外边框的左上角作为
iii. 父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白
CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。
position 定位属性，是CSS中非常重要的属性。除了文档流布局，就是定位布局了。本来我对这个问题没有放在心上，毕竟写了这么多年的css，对position的各类使用是烂熟于心的。但是今天突然发现，居然很多人都不清楚position参数。因此，特地写这篇博文，详细解读一下position 以及参数。
注：浮动元素在前面，后面是标准元素，然后对标准元素,设置了margin-top:-25px , 然后会发现浮动元素跟着向上了
前言 刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到Document flow(文档流)的资料。后来终于知道是某位大神将Normal flow翻译为文档流而已。。。。。。而我更偏好它的直译"常规流"，或直接引用英文名词就好了。 Normal flow到底啥意思啊？ 首先我们
感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right，平时只用到clear:both，好像也只见到这个，这就尴尬。
clear有四个属性值： clear:left;right;both;none.
An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.
看到这两个案例时，你可以先短暂的想想平时都是如何实现的，很多同学的答案应该是这样的。
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行；
在网页设计和开发中，布局是至关重要的一部分。为了创造吸引人的网页，开发人员需要深入了解各种布局技巧。CSS（层叠样式表）是控制网页布局的主要工具之一，而其中的定位属性为开发人员提供了强大的控制能力。在本文中，我们将深入研究CSS定位，以及如何利用它来创建现代、响应式的网页布局。
HTML5学堂 - 刘国利：最近有好几个学生和自己聊起，总觉得定位有点懵。因此在本文中，主要书写了相对定位relative和绝对定位absolute，定位的用法以及叠层后的层级关系计算方法。 position的属性值 position属性规定了元素的定位类型，所有的元素都可以用position来进行定位。position定位之后的对象将具有块属性。position属性有五个取值，分别为：static、relative、absolute、fixed、inherit，其中“static”为默认值，可以省略不写，
在W3CSchool学习web前端时，看完CSS定位-浮动这一节后，感觉没有什么问题。但是在CSS高级-分类这一节的中进行实践时，遇到了如下问题。测试地址：浮动的简单应用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
display: none 和 opacity: 0，子元素会和父元素一样保持不可见。
1 文档流 要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。 而正常文档流就是在不用样式控制之下，html元素的默认排版方式。它的规则如下： 自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行 独占一行 从左向右 这是在不使用 样式的请况之下正常排列方式。倘若使用样式改变了某些元素的位置，那么就称为脱离文档流。也正是因为如此，才能有丰富的页面布局方式。否则大家都只是遵循上述两种方
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.利用css3新增属性transform: translate(-50%,-50%);
对于每一位网页设计者来说，都应该知道 HTML、因为它是所有网页制作的基础。但是如果希望网页能够美观、大方、并且升级方便、维护轻松，那么仅仅知道 HTML 语言是不够的，CSS 在这中间扮演者重要角色。CSS （Cascading Style Sheet）叠层样式表。主要是用来进行页面的版面布局和外观样式的美化。能够将结构html和样式css分离书写，简化代码，提高可阅读性。
1、在静态定位的情况下，每个元素都处于常规文档流中。他们都是块元素，所以会从上到下堆叠在页面上。
[2].浮动布局方式：通过设置html的float属性显示,值：none不浮动、left对象向左浮动，而后面的内容流向对象的右侧、right对象向右浮动，而后面的对象流向对象的左侧(取消独占一行的行为，允许别人与其一行，其实是这个块从文档流中分离出来，他之后的对象视它不存在)
定位的基本思想很简单，它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其
标准文档流 指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式 。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
1. 页面常用布局 常用的页面布局方式主要有：浮动，弹性盒子，定位，设置表格模式，行内与块级相结合。 布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意 清除浮动 设置自适应子容器与父容器 嵌套使用,各中关系 内容会自适应 效果有局限性，行内块之间有缝隙 1.1.浮动布局（Float） 值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现
CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
一周的面试题有点多，希望你能够转发收藏起来，方便自己后面有时间可以更好的回顾备忘，也当做是对我们的一点支持，如果你有更好的点子，欢迎加入前端开发微信群，这里有很多活跃的大神每天都在分享，群主也会每天分享最优秀的文章给大家。
1、传统布局方式就是通过盒模型，使用display属性（文档流布局）+position属性（定位布局）+float属性（浮动布局）。
本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译，整个译文带有我们自己的理解与思想
作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。
文档流（定位流，普通流，浮动流） 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照
我们在平常做项目的时候，float这个css属性经常会用到。元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。 浮动的影响 浮动元素会使得父级元素高度塌陷 html: css: * { // 实际项目中不要用通配符*去设置样式 margin: 0;
定位属性是CSS中用于控制元素在文档中位置的关键属性。它主要用于确定元素相对于其父元素或其他元素的位置。
引言 在现在的前端页面中，尤其是移动端，经常会需要将或者是
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。（一般情况下参考元素 == 父级元素，这里写成参考元素而不是父级元素，在下面我会再细说）
大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说css里的clear_clear用法,希望能够帮助大家进步!!!
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
1）块级元素会在文档中单独占有一行 ----------------在文档流中 在位置 即从上到小排列
无依赖绝对定位元素可以使用margin值进行定位，实现脱离文档流的相对定位效果，脱离文档流可以解决溢出限制的问题
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
