51工具盒子1.标准文档流
标准文档流，又称为"普通文档流"或"正常文档流"，"标准文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。"也就是说，标准文档流指的就是默认情况下页面元素的布局情况
内联元素(block) == <span>、<a>、<img>、<strong>、<font>...
块级元素(inline) == <h1>...<h6>、<p>、<div>、列表...
2.行块级转换
**语法：**display:属性值;
属性值：
none == 此元素不会被显示
block == 此元素将显示为块级元素，此元素前后会带有换行符
inline == 默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block == 行内块元素
案例：span标签转块级标签(block)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转换块级</title>
<style>
*{
margin: 10px;
}
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
/*内联标签不能设置宽高*/
.sp1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.sp2{
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
我是div标签
</div>
<span class="sp1">
我是span标签(未转换块级标签)
</span>
<span class="sp2">
我是span标签(转换块级标签)
</span>
</body>
</html>
3.浮动
浮动是CSS布局的利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素
注意：浮动会使元素脱离标准文档流
语法： float:取值;
left == 元素向左浮动
right == 元素向右浮动
4.清除浮动
上述案例，如果只浮动前2个框，而第三个框有又不想被浮动元素覆盖，在CSS中，我们可以使用clear属性来清除浮动带来的影响
语法：
clear: 取值;
left == 清除左浮动
right == 清除右浮动
both == 同时清除左浮动和右浮动
