在CSS中常见的浮动布局方式及其清除方法掌握后即可完成网页设计。

文章结构概览

• • • • 1. 传统网页布局的三种方式
    • • • 1.1 标准流
    • 2. 为何要引入浮动机制
    • 3. 浮动概念解析
    • 4. 浮动元素的排列特征
    • 5. 浮动在实际中的典型应用
    • 6. 清除浮动的必要性探讨
    • 7. 清除浮动的核心原理
    • 8. 实现清除浮动的多种手段

1. 传统网页布局的三种方式

网页布局的核心在于借助CSS实现盒子模型的定位与排列，将各个元素放置到指定区域。

CSS技术为网页设计提供了三种经典的布局手段：

• 标准流模式
• 浮动布局
• 定位机制

1.标准流定义与特征

所谓标准流，即标签会依照预设的默认方式进行排列。

1. 块级元素将单独占据一行，并按照从上至下的顺序依次排列。

    常用元素：<div> <hr> <p> <h1~h6> <ul> <ol> <form> <table>
    
    
      
    

2.行内元素将依照排列顺序自左向右依次展示，当触及父容器边界时会自动进行换行处理。

    常用元素：<span> <a> <i> <em>
    
    
      
    

上述内容均属于标