CSS基础四--浮动布局

1.浮动（float）

1.1传统网页布局的三种方式

• 网页布局的本质–用CSS来摆放盒子。把盒子摆放到相应位置。

CSS提供了三种传统布局方式

• 普通流（标准流）
• 浮动
• 定位

1.2标准流（普通流/文档流）

1.3 为什么需要浮动

1.4什么是浮动？

1.5浮动特性

1.6浮动元素经常和标准流父级搭配使用

常见的网页布局

2.1 常见网页布局

2.2浮动布局注意点

3.清除浮动

3.1为什么要清除浮动

3.2 清除浮动本质

3.3 清除浮动

• ①额外标签法也称为隔墙法，是W3C推荐的做法。
• ②父级添加overflow属性
• ③父级添加after伪元素
• ④父级添加双伪元素

清除浮动–额外标签法

总结

清除浮动–父级添加overflow

清除浮动–：after伪元素

清除浮动–双伪元素

3.4清除浮动总结

4.PS切图

4.1常见的图片格式

案例

CSS属性书写顺序

页面布局整体思路