前端网页布局方式

常见的布局方法以及它们的优缺点

1、Flex弹性布局

• 优点：css3新特性，简单快捷，目前主流布局方式，解决旧特性定位时产生元素脱离文档流问题。
• 缺点：仅支持 IE9 以上浏览器。 2、Grid - 网格布局
• 优点：可将网页划分成不同的网格，任意组合不同布局，可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
• 缺点：css 实验性新特性，在浏览器中还没有得到广泛的支持。 3、Floats - 浮动布局
• 优点：比较简单，兼容性好；
• 缺点：浮动会使元素脱离文档流，容易出现高度塌陷等问题，需做好清理浮动。

4、Positioning - 定位布局

• 优点：简单直接；
• 缺点：绝对定位同float布局一样会脱离文档流，高度塌陷问题。

清除浮动的四种方法(推荐使用前两种，生产环境推荐第二种。)

1. 父容器添加 overflow

.container { 
    overflow: hidden; 
    /* 或 auto、scroll 等非默认 visible 值*/
}

2. 通过伪元素清除浮动

• 通用样式添加 .clearfix 及其伪类样式；
• 给需要清除浮动的元素class添加 clearfix 类；

.clearfix:before,
         .clearfix:after {
         　　content:"";
         　　display:block;
         }
         .clearfix:after {
         　　clear:both;
         }

         /* For IE 6/7 (trigger hasLayout) */
         .clearfix {
         　　zoom:1;
         }

3. 父容器内添加空元素

• 父容器底部添加空元素；
• 添加样式 clear: both；
  缺点：增加冗余标签，违背了语义网的原则。

4. 浮动父容器

缺点：影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。