07-浮动

浮动

1. 浮动简介

浮动，可以使用一个元素向其父元素的左侧或者右侧移动

使用float 属性上设置元素的浮动
float可选值:

• none 默认值，元素不浮动
• left 元素向左浮动
• right 元素向右浮动

注意：

1. 元素浮动之后，水平布局不需要满足强制公式
2. 浮动之后，脱离文档流，像一个气球一样浮在上面，不会占用文档流的位置，所以其他元素可以占用浮动之前的位置

2. 浮动特点

1. 脱离文档流，不占据文档流的布局位置（气球）
2. 浮动之后，向父元素的左侧和右侧移动
3. 浮动之后，不会浮出父元素
4. 多个浮动时候，浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）
5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

示例

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

浮动的box1已经不会影响布局位置，他已经浮动在上面，而box2就要顶上他的位置，此时就会有覆盖的效果

多个浮动布局
多个浮动时候，浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）

上边没有浮动，下边浮动
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

浮动与文字
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

3. 脱离文档流的特点

块元素：

• 块元素不再独占页面的一行
• 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
  

行内元素：

• 行内元素脱离文档流以后会，特点和块元素一样

例子：原来span不可以设置width，height，浮动 之后就可以设置了