实现两栏布局的五种方式

本文节选自我的博客：实现两栏布局的五种方式

• 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
• CSDN主页：爱吃糖的猫
• 我的博客：爱吃糖的猫
• Github主页: MilesChen
• 支持我：点赞+收藏⭐️+留言
• 介绍：The mixture of WEB+DeepLearning+Iot+anything

前言

实现两栏布局也是一道经典的面试题，两栏布局即左边固定右边伸缩，要实现两栏布局的方式超过十种了，下面举例五种，用来抛砖引玉。

float+BFC

    
        
        
        
        
        
    
    
		

			
左侧
			
右侧
		
    

float+margin

    
        
        
        
        
        
    
    
		

			
左侧
			
右侧
		
    

flex

    
        
        
        
        
        
    
    
		

			
左侧
			
右侧
		
    

左侧绝对定位

    
        
        
        
        
        
    
    
		

			
左侧
			
右侧
		
    

右侧绝对定位

    
        
        
        
        
        
    
    
		

			
左侧
			
右侧
		
    

总结

1. float+BFC：第一栏float:left; overflow: hidden; 清除浮动显示第二栏
2. float+margin：第一栏float:left；给第二栏设置margin-left
3. flex：将第二栏flex设置为1
4. 左边绝对定位：第一栏绝地定位；第二栏margin-left
5. 右边绝对定位：第二栏绝对定位：left为第一栏的宽度；top: 0;left: 200px;right: 0;bottom: 0;

还有其他方式，比如 grid 、float+calc 、table+calc 就不一一举例了。

---

感谢小伙伴们的耐心观看，本文为笔者个人学习记录，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！