CSS浮动及清除浮动

float属性
作用：可以让多个块级元素在一行显示
应用场景：用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的特性：

1. 浮动的元素会脱离标准流
2. 可以一行显示多个，并且顶部对齐
3. 具有行内块元素的特性

应注意：

1. 不再占据原先的位置，可以移动到指定位置
2. 浮动的盒子之间没有缝隙，紧挨着
3. 添加浮动后，默认大小根据内容来定
4. 浮动的盒子必定有一个标准流父亲
5. 父盒子中的所有亲儿子要一起浮动
6. 父盒子宽度不够儿子用，子盒子会掉下去
7. 浮动的盒子只会影响其后面标准流的位置

清除浮动
为什么要清除浮动？
在一些情况下，如新闻栏目、网站商品栏，没办法设置父盒子的确切高度，子盒子浮动后，会影响的后面元素的布局，所以要清除浮动。
清除浮动的本质：清除浮动元素造成的影响
语法：选择器 {clear: both;}（闭合浮动）

清除浮动4种方法

1.额外标签法
在浮动元素的末尾添加一个空标签，如

<div style="clear: both;"></div>

缺点：添加许多无意义空标签，结构化差

/* 2.overflow: hidden;清除法 */
/* 给父元素添加overflow: hidden;属性 */
/* 缺点：无法显示溢出部分 */

/*3. after伪元素清除法 */
.clearfix::after {
   content: '';
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
}

 /* 4.双伪元素清除法 */
 .clearfix::before,
 .clearfix::after {
     content: '';
     display: table;
 }

 .clearfix::after {
     clear: both;
 }

圆角边框及盒子阴影

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    /* 设置圆角为宽高的一半，可得到圆形 */
    /* border-radius: 100px; */

    /* 还可以用百分比来设置圆角,50%为圆形 */
    border-radius: 50%;

    background-color: rgb(248, 214, 17);

    /* 为这个圆加阴影 */
    /* box-shadow: 水平距离 垂直距离 模糊阴影 阴影尺寸 颜色 内阴影转换(inset); */
    /* box-shadow: 5px 5px 10px 10px #efefef; */

}
/* 常常把阴影加作hover效果 */
.box:hover {
    box-shadow: 5px 5px 10px 10px #efefef;
}