浮动

浮动

1. 什么是浮动

概念：元素的浮动是指设置了浮动属性的元素

1. 脱离标准普通流的控制
2. 移动到指定位置

2. 浮动的作用

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

3. 浮动的语法

选择器{float : 属性值 ； }
属性值：none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

4. 浮动小结

• 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
• 加了浮动的盒子是不占位置的，她原来的位置漏给了标准流的盒子。
• **特别注意：**浮动元素会改变display属性，类似转换行内块，但是元素之间没有空白缝隙

5. 浮动元素与父盒子的关系

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

6. 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。