normalflow/normal-flow（文档流/document-flow）W3C规范中没有文档流/document-flow的概念，只有normalflow/normal-flow，以及文档的名称flow主要是大多数中文译者的翻译方式。什么是普通流？就是按照元素在HTML中的位置顺序（从上到下，从左到右）排列元素（block/block元素，inline/inline元素）的过程。调整普通流元素margin位置的四种方式：分隔元素元素与元素之间的距离，控制块级元素之间的距离padding：分隔元素与内容的距离，控制块级元素内部浮动（见详见“浮动/浮动”一章）position定位布局（详见“Positioning/Position”一章）盒模型/Box-model盒模型主要定义了四个区域内容（content）内边距（padding）边框（border）)outermargin（边距）注意background-color/background-image在padding+content区域定义boxwidth=border(right+left)+padding(right+left)+widthBoxheight=boder(top+bottom)+padding(top+bottom)+heightpadding会开箱子，计算箱子宽度时需要注意paddingFloating/Float+positioning/PositionFloating/Floatlayout可以让块级元素排成一行，并且只能放在乐ft或框的右侧，并设置了float属性。注意：float将block-level/block元素转换为inline-block/inline-block元素；浮动内容位于内容区域（内边距和边框内）。使文本环绕元素，如果您希望元素与文档有一些间距，请设置元素边距。没有完全脱离文档流，内联元素（img,a,input,plaintext...）的内容没有脱离文档流，如果完全脱离文档流，文本“没有浮动”"而图片会按照蓝色方框放置在左上角，但都排在了粉色区域之外，说明内容占据了文档流。清除浮动为什么要清除浮动？浮动会导致父元素的高度塌陷。如果影响布局，需要清除浮动。清除浮动的方式CSS中使用clear属性来清除浮动选择器{clear:attributevalue;}/*属性值left:清除左边的floatright:清除右边的floatboth:清除左边的影响同时向右浮动*/附加方法：在最后一个浮动元素后添加一个空的块级元素（div/br...），并添加'clear:both'属性。缺点：增加冗余节点。不建议！父元素溢出：给父元素添加overflow属性ul{overflow:hidden;*缩放：1；/*兼容IE7以下版本，触发hasLayout*/}缺点：当内容增加时，无法显示需要溢出的元素。不建议！添加overflow后的效果：:after伪类：父元素末尾的空块级元素，推荐！.clearfix:after{内容：“”；/*content:"."，尽量不要带点*/display:block;/*after是内联元素，必须转为块级元素，否则子级open时父级的高度不支持*/height:0;/*清除布局上产生的间隙*/clear:both;可见性：隐藏；/*隐藏元素的所有样式内容，而不是隐藏dom元素*/}.clearfix{*zoom:1;/*兼容IE7以下版本，触发hasLayout*/}:before+:afterdouble伪类：代码更简洁，推荐！.clearfix:before,.clearfix:after{内容:"";显示：表格；}.clearfix:after{clear:both;}.clearfix{*缩放：1;/*兼容IE7以下版本，触发hasLayout*/}Positioning/PositionedgeoffsettopbottomleftrightPositioningmodestatic:默认定位方式，不脱离文档流relative：相对定位，脱离文档流，但占据绝对位置：绝对定位，脱离文档流，不占位置浏览器当前屏幕准对齐（document文档）。父元素有定位，它根据最近的已定位（绝对、固定或相对）的父元素（祖先）来定位元素。child和father不同，因为child是绝对定位的，不会占位置，可以放在parentbox的任意位置。parentbox在布局的时候需要占一个位置，所以parent只能相对定位。如下，轮播图片是固定的：定位固定，脱离文档流，不占位置。固定定位元素与父无关，只认浏览器。fixed定位完全跑题了，不占位置，不随滚动条滚动。兼容性，低版本浏览器
