前端常用布局方式

1、默认静态布局（标准流）
块级元素独占一行；
内联元素在同一行显示；

2、浮动布局（float）
‘浮’：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面；
‘漏’：浮动的盒子不占位置，元素原先的位置会漏给标准流的盒子
‘特’：浮动使元素具有行内块特性；
（1）元素的浮动：
元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。
左浮动 float： left;
右浮动 floa： right;
（2）浮动的特性：
元素浮动会脱离标准流，不占位置；
浮动跨不过边框和边距；
（3）关于清除浮动
原因：浮动元素不占位置，会影响后面元素的排版；
本质：解决父级元素因为子级元素浮动引起内部高度为0的问题；

3、定位布局（position）
（1）静态定位 position：static;
所有元素的默认定位方式，即标准流布局；
（2）相对定位 position：relative;
相对于自己原来的位置进行定位移动，移动后原先的位置仍然占有- - -自恋型定位；
（3）绝对定位 position：absolute;
父元素没有给position时,子元素以浏览器当前屏幕为基准点进行相对移动；
（4）固定定位 position：fixed;
无论页面怎么滚动，位置都是固定的，不会跟着页面走；

4、弹性布局（flex）
通过在父容器上添加display：flex；属性，实现子元素在父元素中的弹性布局。

5、响应式布局（自适应网页设计）
响应式布局是CSS3增加的新布局方式，指一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

优点：为不同终端的用户提供更加舒适的界面和更好的用户体验，适应PC端和移动端。

实现方案：
（1）媒体查询
（2）百分比布局
（3）rem布局
（4）视口单位（vh）
（5）flex弹性布局