常见的CSS页面布局方式

详情：CSS页面结构是我们日常生活中最常使用到的，当然目前可能大家用的最多的是elementUI实现布局，简单方柏霓，下面介绍几种常见的原生页面布局的方式

公共的样式部分

1、float浮动布局方式

  
  

    
    

      

      

      

        
这是float布局
        
这是一段文字
        
这是一段文字
      
    
  

2、absolute的布局方式

 
  

    
    

      

      

        
这是absolute布局
        
这是一段文字
        
这是一段文字
      
      

    
  

3、flex布局

  
  

    
    

      

      

        
这是flex布局
        
这是一段文字
        
这是一段文字
      
      

    
  

4、Grid布局方式

  
  

    
    

      

      

        
这是grid布局
        
这是一段文字
        
这是一段文字
      
      

    
  

效果图展示：

总结：
（1）float布局的兼容性比较好。缺点是如图二, 解决办法：给橙色块添加overflow: hidden（生成了一个BFC）。浮动元素父元素还存在高度塌陷问题，解决方法： 父元素生成一个BFC。
（2）absolute布局的有点是简单直接，兼容性好。缺点，脱离了文档流。
（3）flex布局的优点，布局简单、灵活，移动端友好；缺点是ie8以下不兼容。
（2）grid布局优点，是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。缺点是对低版本浏览器兼容性不好。