1.CSS布局的三种机制

• 普通流（标准流）

1. 块级元素会独占一行，从上向下顺序排列：

常用元素：div，hr，p，h1-h6,ul,ol,dl,form,table 2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素则自动换行：

常用元素：span，a，l，em等

• 浮动：让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示
• 定位：将盒子定在浏览器的某一个位置--CSS离不开定位，特别是后面的js特效

2.什么是浮动（float）

• 概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置的过程
• 作用：

1. 浮动最早是用来控制图片，实现文字环绕图片的效果
2. 让多个盒子（div）水平排列成一行，使得浮动成为布局的重要手段
3. 可以实现盒子的左右对齐等等

• 语法：

• 浮动小结 . float--浮漏特

3.浮动（float）的扩展

• 浮动元素与父盒子的关系

1. 子盒子的浮动参照父盒子对齐
2. 不会与父盒子的边框重叠，也不会超过父盒子的内边距

• 浮动元素与兄弟盒子的关系 在一个父级盒子中，如果前一个兄弟盒子是：

1. 浮动的，那么当前盒子会与前一个盒子的顶部对齐
2. 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方 注意：浮动只会影响当前的或者后面的盒子，不会影响前面的标准流

建议：如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，防止引起问题

4.清除浮动

• 为什么要清除浮动 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子

• 总结：

1. 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
2. 准确地说，并不是清除浮动，而是清除浮动后造成的影响

• 清除浮动本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题
• 清除浮动的方法：

1. 语法：

2. 额外标签法（隔墙法）

3. 父级添加overflow属性方法

4. 使用after伪元素清除浮动

5.使用双伪元素清除浮动

5.浮动总结