网页的基础布局：标准流、浮动、定位

打算转前端，先来回忆一下一些基础知识，我们的网页常见布局方式有：标准流、浮动、定位

标准流
标准流就是块级元素block独占一行，新的块级元素会换行，div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等。

特点：

​ 1.块级元素可以嵌套任何元素；

​ 2.块级文字元素中不能放入其他块级元素，比如： p中不要嵌套div、p、h

​ 3.默认宽度是父元素宽度

​ 4.可以设置宽width和高height

行内元素inline：span、a、lable、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、

特点：

​ 1.无法自动换行

​ 2.不可设置宽width高height

​ 3.一行可以放多个

​ 4.默认宽度就是本身内容的宽度

​ 5.行内元素可以设置padding

​ 6.外边距margin只能够设置水平上的边距，即margin-left和margin-right,设置margin-top和margin-bottom无效

行内块元素inline-block:img 、input 、td、button

特点：

​ 1.可以设置宽高

​ 2.可以设置内外边距

​ 3.不会自动换行

标签之间的互相转化display：inline（转为行内元素）/inline-block（转为行内块元素）/block（转为块元素）/none（隐藏 不显示）

浮动
最早是用来控制图片，实现文字环绕的效果，浮动元素不占据原来的位置，会脱离文档流。float:left，表明元素必须浮动在其所在的块容器左侧的关键字。

特点：

​ 1.当元素浮动（float）时会转化成行内块元素特点。因此其后一个兄弟标签会按照水平布局一样排其水平后面，如果是标准文档流的话会排在他的下面。建议有一个元素是浮动的话，其兄弟元素最好也是浮动的。

​ 2.不占用父元素的高度。因为很多时候父元素的高度一般是由子元素撑开的，设置浮动后，导致父元素的高度为0，会对之后的排版造成影响，因此需要清除浮动后带来的影响,清除浮动方法如下

方法一：兄弟元素末尾添加标签

<div style="clear:both"></div>

方法二：使用伪元素

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;/* IE6、7专有 */
}
定位
1.position:static静态定位，默认值，设置和不设置都一样，静态定位就是标准文档流

2.position:relative相对定位，相对定位是相对于自己初始的位置进行移动的，不会破坏文档流，不会破坏网页的正常布局，很多时候的作用是给绝对定位提供参照物（工具人）

3.position:absolute绝对定位，只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的祖先元素，直至body）,绝对定位会脱离文档流,初始位置不存在,会破坏网页布局，

4.position:fixed固定定位,固定定位相对于浏览器位置（浏览器的可视区域）进行移动，常用于网页中弹窗、聊天窗口、广告等，固定会使用元素脱离文档流,初始位置就不存在

5.position:sticky粘性定位，粘性定位结合了相对定位和固定定位共同特点，相对定位中不脱离文档流,固定定位中相对于浏览器，兼容性很差,在低版本浏览器中是无法使用的