css布局-浮动,负margin,圣杯/双飞翼布局

---

1. 浮动 vs 负margin

对于相邻的两个浮动元素，如果因为空间不够导致第二个浮动元素下移，可以通过给第二个浮动元素设置margin-left: 负值 来让第二个元素上移，其中 负值 大于等于元素上移后和第一个元素重合的临界值

e.g:

三个浮动元素:

最后一个浮动元素使用了负边距:

范例演示

范例

水平等距排列

范例

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

关键步骤是总体.ct>ul{ margin-left: -20px;}

3. 圣杯布局

1. 是三列布局，两边固定宽度，中间自适应
2. 中间内容元素在 dom 元素次序中优先位置

为何要dom元素放前?
重要的东西放前面,据说对SEO有好处.
对阅读代码有好处.

实现

按照注释编号，一行行实现观察效果 范例

  

    
main
    
aside
    
extra
  

缺点

.mian的最小宽度不能小于.aside的宽度

---

双飞翼布局

范例

 
  
  

    

      
main
    
    
aside
    
extra