web常见的五种前端布局方式

web大前端布局

常用的布局

常用的布局一般分为一下几大类：

文档布局（text）

文档流本质是 nomal flow （普通流、常规流）

元素在文档中的特点 块级元素，和内联元素。

块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默认被内容撑开。

内联元素：内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。在文档流中，内联元素的宽度和高度默认都被内容撑开。 什么是文档流（文档布局）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。

缺点：在移动端不可以使用pc端的页面，两个页面的布局是不一致的，移动端需要自己再设计一个布局并使用不同的域名呈现

浮动布局（float）

浮动一般用于让块级元素排成一行在同一行显示

任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性float：left沿着父容器顶部向左推入容器，如果卡住推不动，判断当前位置能否全部显示该子容器，如果能完成 如果不能继续找空档往里推

缺点：脱离文档流，需要清除浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。

优点：兼容性好，计较简单容易上手