CSS浮动float☆

什么是浮动

float浮动用于创建浮动框，将其移动到任意一边，直到左边缘或者右边缘或者另外一个浮动框。

浮动的属性

默认是没有，也可以设置为left/right。

float:left;

例子：

.box1 {
            background-color: #ff0000;
            width: 100px;
            height: 100px;
            float: left;
        }
        .box2 {
            background-color: #d0ff00;
            width: 100px;
            height: 100px;
            float: left;
        }
        .box3 {
            background-color: #0059ff;
            width: 100px;
            height: 100px;
            float: left;
        }

浮动的特性

1. 会脱离标准流
2. 会一行显示并且顶部对齐
3. 会有块元素的属性

特性

会脱离标准流

脱离标准流的控制(浮)移动到指定位置(动)，浮动的盒子不保留原先的位置。

.box1 {
            background-color: #ff0000;
            width: 100px;
            height: 100px;
            float: left;
        }
        .box2 {
            background-color: #d0ff00;
            width: 200px;
            height: 200px;
        }

会一行显示并且顶部对齐

.box1 {
            background-color: #ff0000;
            width: 100px;
            height: 100px;
            float: left;
        }
        .box2 {
            background-color: #d0ff00;
            width: 100px;
            height: 150px;
            float: left;
        }
        .box3 {
            background-color: #0059ff;
            width: 100px;
            height: 100px;
            float: left;
        }

会有块元素的属性

只要使用了浮动属性，那么这个元素就会具有块元素的属性。

如果块元素(行内元素加了浮动)没有设置宽度则会自动根据内容多少和内容多少来设置。