CSS浮动讲解今日学习1.CSS布局三种机制2.

今日学习1.CSS布局三种机制
2.CSS浮动
3.CSS浮动特点
4.CSS清除浮动
扩展css3属性圆角边框矩形 -- 包含正方形和长方形。
正方形变成圆 ---- 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);css布局三种机制三种机制 -- 普通流（标准流）浮动定位
普通流

块级元素会独占一行，从上向下排列

常见的块级标签：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属性方法（也不是很推荐）overflow:hidden;
缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。
after伪元素清除浮动（推荐）

 .clearfix:after {/* 使用伪元素必须添加content属性 */content: "";/* 因为伪元素是行内元素 ， 所以需要转换成块元素 */display: block;/* 兼容 */height: 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.子盒子又浮动。
【CSS浮动讲解】3.因为浮动影响了后面的布局。