弹性布局-浮动布局

浮动布局

浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。

    
        
        
        
    
    
        

            
left，宽度固定，高度可固定也可以由内容撑开。
            
right，宽度固定，高度可固定也可以由内容撑开。
            
center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。
        
    

效果图

1.jpg

原理非常简单，左右侧边栏定宽并浮动，中部内容区放最后不浮动、默认width：auto并设置相应外边距，让左右侧边栏浮动到上面。注意：子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。

    
        
        
        
    
    
        

            
center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。
            
left，宽度固定，高度可固定也可以由内容撑开
            
right，宽度固定，高度可固定也可以由内容撑开
        
    

效果图

2.jpg

思路：

1)既然HTML里面要让center放前面，为了让left跑到center前面，那center也必须浮动了，否则因为都是块元素他们会分两行。

2)浮动之后还要让center宽度自适应，那明显width只能100%，然后在父元素中设width:auto，还有两侧margin，其实也就是父对象宽度自适应，center只是继承content的宽度。

3)对left使用负的margin让他们浮动到上方去。

两种发放多少有一点区别，另外就是calc()函数。
总结：使用浮动来进行布局，一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动，难以把握。在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容，将元素做成等高排列，从美观上看也当然也是极好的，比参差不齐的排列要美观。