浮动（一）

浮动简介

float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。

浮动特点

1. 浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动
2. 元素浮动以后，元素会尽量向页面的左上或页面右上漂浮
3. 浮动元素默认不会从父元素中移出
4. 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

    <style>
        .a {
            height: 400px;
            background-color: rgb(236, 129, 129);
        }
        .b {
            width: 100px;
            height: 100px;
        }
        .b:nth-of-type(1) {
            background-color: rgb(205, 255, 125);
        }
        .b:nth-of-type(2) {
            background-color: rgb(125, 255, 209);
        }
        .b:nth-of-type(3) {
            background-color: rgb(125, 144, 255);
        }
        .b:nth-of-type(4) {
            background-color: rgb(233, 125, 255);
        }
        
    </style>
	<div class="a">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>