三种前端常用布局及其优缺点

1.网格布局

• 优点：可将网页划分成不同的网格，任意组合不同布局，可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
• 缺点：css 实验性新特性，在浏览器中还没有得到广泛的支持。

2.弹性布局

• 优点：css3新特性，简单快捷，目前主流布局方式，解决旧特性定位时产生元素脱离文档流问题。
• 缺点：仅支持 IE9 以上浏览器。

3.浮动布局

• 优点：比较简单，兼容性好；
• 缺点：浮动会使元素脱离文档流，容易出现高度塌陷等问题，需做好清理浮动。
• 清除浮动的四种方法：
• 1.父容器添加overflow：hidden
• 2.通过伪元素清除浮动：
• 通用样式添加.clearfix及其伪类样式
• 给需要清除浮动的元素class添加clearfix类
• //在css中添加:after伪元素
  .parent:after{
      /* 设置添加子元素的内容是空 */
        content: '';  
        /* 设置添加子元素为块级元素 */
        display: block;
        /* 设置添加的子元素的高度0 */
        height: 0;
        /* 设置添加子元素看不见 */
        visibility: hidden;
        /* 设置clear：both */
        clear: both;
  }
  <div class="parent">
      <div class="f"></div>
  </div>