1.CSS布局三种机制
2.CSS浮动
3.CSS浮动特点
4.CSS清除浮动
矩形 -- 包含正方形和长方形。
正方形变成圆 ---- border-radius:宽高的一半(50%)。
矩形变成椭圆 ---- border-radius值:高度的一半。
.radius { width: 200px; height: 120px; background-color: pink; / 四个值遵循顺时针，从上左角开始数 / border-radius: 0px 40px 0 40px; } 3. 可以设置不同的圆角:
/圆形的大头贴/ img { width: 100px; height: 100px; border-radius: 50%; }?
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影(默认，但是不要写这个值)；
注意：水平阴影和垂直阴影是必须书写，不能省略。
双阴影的写法，如下： div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .6), 8px 10px 9px -3px yellow; }?
text-shadow:水平（必须） 垂直（必须） 模糊距离 阴影颜色。
文字也可以双阴影，基本不用 text-shadow: 5px 2px 3px rgb(100, 12, 88), 6px 6px 5px rgb(90, 100, 0);
三种机制 -- 普通流（标准流） 浮动 定位
普通流
块级元素会独占一行，从上向下排列常见的块级标签：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序从左到右顺序排列，碰到父元素边缘自动换行常用元素：span、a、i、em等
网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。
举例子：
前面学过行内块，行内块可以一排显示；但是中间会有缝隙，所以不能满足我们的开发需求。
选择器{float:属性值;} 值：none(没有) left(左浮动) right(右浮动)
注意：标准流占有位置。
浮动特点1 --- 脱离标准流，不占位置（自己原来的位置漏给后面的标流）浮动特点2 --- 浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。浮动特点3 -- 任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。
权重复习：*和继承 0000标签 0001类选择器(伪类) 0010ID选择器 0100行内样式 1000！important 无穷大一个技巧：一般一个标流的父亲，里面一个孩子浮动了，其他的孩子也都浮动。
标准流--占有位置 浮动--- 不占位置(脱标)
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
浮动的元素压不住父亲的二手交易平台边框浮动的元素压不过父亲的padding后面学的定位可以随便压清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。
如果子盒子是标流，因为标流占有位置，所以父亲能检测到高度。
子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。
清除前面的盒子设置浮动后，带给后面盒子的影响。
在最后一个加了浮动元素的末尾添加一个块级别的空标签。
--- 这个空标签一定是块元素.
缺点：结构容易乱。
overflow:hidden;
缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。
.clearfix:after { / 使用伪元素必须添加content属性 / content: ""; / 因为伪元素是行内元素，所以需要转换成块元素 / display: block; / 兼容 / Height＜/span>: 0; clear: both; visibility: hidden; } .clearfix { / IE6、7 专有 / *zoom: 1; }
.clearfix::before, .clearfix::after { / 要想使用伪元素，必须写上content属性 / content: ""; / 这里写成block也是没有问题的，为什么使用table,这是老的写法，兼容老版本浏览器 / display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; }
1.父亲没有高度。
2.子盒子又浮动。
3.因为浮动影响了后面的布局。
