1. float 浮动
1.1 在 CSS 中，任何元素都可以浮动。
1.2 浮动元素会生成一个块级框，而不论它本身是何种元素。内联标签设置浮动，就变成了块级标签。
1.3 关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.4 三种取值：left向左浮动；right向右浮动；none默认值，不浮动
详情：https://www.w3school.com.cn/css/css_positioning_floating.asp
示例：
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
CSS: *{margin:0px;} /*浏览器默认margin是8px，设置为0px，让背景色布满页面*/
.c1{
width:200px;
height:500px;
background-color:red;
float:left
}
.c2{
width:200px;
height:500px;
background-color:green;
float:left
}
上面两元素都是向左浮动，效果是并排在一起。
2. clear 清除浮动
1. clear属性规定元素的哪一侧不允许其他浮动元素。clear属性只会对自身起作用，而不会影响其他元素。
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
div{clear:left}
2. 清除浮动
2.1 清除浮动的副作用（父标签塌陷问题）
2.2 主要有三种方式：
固定高度
伪元素清除法
overflow:hidden
2.3 伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}
3. overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向
示例1：圆头头像
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
div{
width:200px;
height:100px;
border:1px red solid;
border-radius:30%; /*边框四边圆角，如果边框长宽一样，100%就是圆形*/
overflow:hidden; /*把边框外面的图片边角隐藏了，不然就挡住了边框*/
}
img{
max-width:100%; /*图片最大宽度是父类标签边框的100%，不然就会溢出*/
}
示例2：滚动条
<div>
海燕
在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕就像一道闪电，高傲的飞翔
</div>
div{
width:100px;
height:100px;
border:1px red solid;
overflow:auto;
}
