float:right

  • 使得块内容居右
  • 增加显示效果

流（flow）工作原理

11. 布局与定位 - 图1

clear属性

  • 使得左右内容没有间距

页面调整

如果使得页面左紧右松

  • 把sidebar下移到main下面
    11. 布局与定位 - 图2
  • 使main块居左
    11. 布局与定位 - 图3
  • 页脚清空左边元素
    11. 布局与定位 - 图4
    效果展示
    11. 布局与定位 - 图5

流体与冻结设计

流体布局

  • 目前所使用均为流体设计，不管浏览器多宽的屏幕，布局均会扩展，填充可用空间
    冻结布局
  • 锁定元素，减少窗口扩展带来的问题，元素无法一定

实现

  1. 新建id属性
    11. 布局与定位 - 图6

  2. CSS修改
    限制固定宽度为800像素
    11. 布局与定位 - 图7

绝对位置

  1. 修改CSS
    11. 布局与定位 - 图8
  2. 调整html
    11. 布局与定位 - 图9

CSS表格实现

11. 布局与定位 - 图10

表格实现

11. 布局与定位 - 图11

  • 创建html
    11. 布局与定位 - 图12
  • CSS表格显示
    table
    11. 布局与定位 - 图13
    table-row
    11. 布局与定位 - 图14
    table-cell
    11. 布局与定位 - 图15
    最终CSS
    11. 布局与定位 - 图16
    间距修正
    11. 布局与定位 - 图17

固定定位

11. 布局与定位 - 图18