css-float，clear

#home{
height: 400px;
width: 400px;
background-color: yellow;
border: 20px solid red;
margin: 50px;
}
#about{
height: 150px;
width: 100px;
background-color: purple;
float: left;
}

<div>
float可以形成文本环绕效果
<div id="home">
<div id="about"></div>
<p>
给元素的float属性赋值以后，元素脱离文本流，进入浮动层；
浮动层空出的位置由后续（非浮动）元素补齐：
块级元素直接填充，内联元素见缝插针
浮动层可以覆盖文本层
</p>
</div>
<div>

#home{
height: 400px;
width: 400px;
background-color: yellow;
border: 20px solid red;
margin: 50px;
}
#about{
height: 150px;
width: 100px;
background-color: purple;
float: left;
}
#source{
height: 100px;
width: 50px;
background-color: green;
float: right;
}
#archives{
height: 250px;
width: 250px;
background-color: black;
}

<div>
<div id="about">about</div>
<div id="source">source</div>
<div id="archives">archives</div>
</div>

#archives{
height: 250px;
width: 250px;
background-color: black;
}