沉淀期——浮动

Posted 2021-08-04 嘴巴嘟嘟

1.浮动

1.1 传统网页布局三种方式

1.2 标准流

所谓的标准流：就是标签按照规定好默认方式排列
1.块级元素会独占一行，从上向下顺序排列
常用元素：div、hr p h1~6 ul ol dl form table
2. 行内元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span a i em 等
以上都是标准流，最基本的布局方式。
注意，实际开发中，一个界面基本都包含了这三中布局方式

1.3 为什么需要浮动

1.如何多个块级盒子排列在一行
2.如何使两个盒子显示在左右

1.4 什么是浮动

1.5 浮动的特性

加了浮动元素之后的元素，具有很多特性

1. 浮动元素会脱离标准流
   

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内显示并且元素特征
   

1.6 浮动元素经常和标准流合并

2. 常见网页布局

2.1 常见网页布局

2.2 浮动布局注意事项

3 清除浮动

清除浮动原理