（重点）浮动和清除浮动的四种方法：额外标签法、overflow、：after、双伪元素法

学习笔记

学习来源：黑马前端p169-188
学习进度：day6

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、传统布局的三种方式

实际开发中，一个页面基本都包含了这三种布局方式
网页布局的第一排列准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

1.普通流

标准流：就是标签按照规定好默认方式排列
块级元素会独占一行，从上向下顺序排列
行内元素会按照顺序，从左向右顺序排列，碰到父元素边缘自动换行

2.浮动

浮动float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

3.定位

二、为什么需要浮动？

1.仅仅使用标准流，不能方便地布局页面，例如：
（1）很难实现让多个块级盒子水平排列成一行，虽然转换成行内块级元素可以实现一行显示，但是它们之间会有较大的空隙
（2）很难实现两个盒子左右对齐
2.浮动可以改变元素标签默认的排列方式，浮动最典型的应用：可以让多个块级元素一行内排列显示

三、浮动的排列特性（重难点）

特性：
1.浮动元素会脱离标准流，且浮动的盒子不在保留原先的位置（最重要）
2.浮动的元素会一行内显示并且元素顶部对齐，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3.浮动的元素具有行内块元素的特性

四、浮动：3种最常见的布局方式

1.基本网页布局

2.