css4浮动+清除浮动

浮动

• 一.常见网页布局
• • 1.三种布局方式
  • 2.布局准则
• 二.浮动（float）
• • 1.好处
  • 2.概念
  • 3.三大特性
  • 4.使用
  • 5.常见网页布局模板
  • 6.注意点
• 三.清除浮动
• • 1.why
  • 2.本质
  • 3.语法
  • 4.四种way（后三个都是给父级添加）
  • 清除浮动总结

一.常见网页布局

1.三种布局方式

标准流/普通流/文档流

浮动

定位

2.布局准则

二.浮动（float）

1.好处

普通流盒子中间默认有空隙且不知道空隙大小，有些布局普通流做不到，浮动可以方便控制盒子间的空隙

2.概念

3.三大特性

（1）脱标

（2）一行内显示且顶端对齐

（3）具有行内块特征

4.使用

5.常见网页布局模板

6.注意点

三.清除浮动

1.why

2.本质

3.语法

应用

4.四种way（后三个都是给父级添加）

（1）额外标签法（空标签必须是块级元素）

（2）overflow

（3）：after伪元素发（复制调用）

（4）双伪元素（复制调用）

清除浮动总结