HTML页面布局

 一.页面布局

1.布局的过程

    第一步：确定版心。是页面的主要内容，通常在页面中水平居中显示。
    第二步：分析页面中的模块（header，nav，bannner，content，footer）。
    第三步：控制页面的各个模块（页面布局设计）。

2.页面布局中常用的属性

     （1）浮动属性：float
        作用：可以让标签在页面中浮动起来，打破传统的流式布局，使页面的内容更加的丰富。
        float取值：left，right，none（默认值）
    （2）浮动属性副作用：
        a.父级容器的背景无法显示
        b.父级容器的边框不能被撑开
        c.会导致父容器的margin，padding属性失效
    （3）解决办法：清除浮动：
        clear：
    （4）消除浮动影响（副作用）的方法：
        a.对父级元素设置合适的css高度（不够灵活）
        b.使用clear：both清除浮动
        c.在父级元素中设置overflow：hidden
        
        
        定位属性：position，可以实现页面元素的精确定位