浮动

float

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

由于float意味着使用块布局，它在某些情况下修改display 值的计算值：

• display为inline或inline-block时，使用float后会统一变成block。

取值：

• left：表明元素必须浮动在其所在的块容器左侧的关键字。

• right：表明元素必须浮动在其所在的块容器右侧的关键字。

  clear

• 有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。此时可以使用clear。

取值：

• left：清除左侧浮动。
• right：清除右侧浮动。
• both：清除左右两侧浮动

.div-outer {
    /* width: 300px; */
    height: 3000px;
    background-color: lightblue;
}
.div-inner1 {
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    float: left;
}
.div-inner2 {
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    color: white;
    float: left;
}
.div-inner3 {
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    float: left;
}
.div-inner4 {
    width: 300px;
    height: 300px;
    background-color: darkgoldenrod;
    /* position: relative;
    z-index: 3; */
    clear: left;
}