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.因为浮动影响了后面的布局。
