目录
一、浮动 float
二、图文组合
单行文本省略号
多行文本省略号
三、定位 position
1、静态定位static
2、相对定位 relative
3、绝对定位 absolute ---父绝子相
4、固定定位 fixed
一、浮动 float
定义：元素脱离文档流，按照指定方向发生移动，遇到父级边界换行。
取值：none、left、right、inhert继承父级。
作用：解决水平布局的问题。
特性：1、解决标签同行显示 2、行标签支持所有css样式 3、默认内容撑开高度 4、元素脱离文档流。
.first {
/* overflow: hidden; */
background-color: skyblue;
}
.son {
/* float: left; */
margin: 10px;
width: 100px;
height: 100px;
background-color: orange;
} 对son子级标签设置浮动使盒子并排显示，但是对子级设置浮动后发现子级脱离了文档流，父级盒子丢失：
这时就要对父级盒子first设置清除浮动overflow:hidden，才能正常显示：
清除浮动的作用：元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开，父级丢失。
清除浮动的方法：1、对父级设置高度清除浮动，但是效果不好有局限性。
2、常用推荐方法，overflow:hidden，清除浮动。
3、在最后一个子级盒子后添加一个空白标签并设置内联样式clear:both
<section style="clear: both;"></section>二、图文组合
1、完成如下案例：
图文1代码
使用ul li标签，先完成一个li标签的内容，再复制四个li，设置li标签左浮动，ul标签设置清除浮动得到。
2、完成如下案例：
图文2代码
同样采用ul li标签，对于多段文字设置浮动，如果直接设置为一个img标签和两个p标签，则两段文字会并排显示，所以采用盒子思维看图是一个重要思维，li标签可以看成是一个img标签和一个div标签，div中看成两个p标签，分别设两个p标签高度各为一半再居中显示。
设置background-size：100% 100%可以让图片铺满整个盒子。
3、完成如下案例：
图文3代码
也是通过ul li标签实现，将li看成一个div标签和两个p标签，第二个p标签为富文本标签，所以用两个span标签，实现文本省略号的方法：
单行文本省略号
/*溢出隐藏*/
overflow: hidden;
/*文本溢出使用省略号代替*/
text-overflow: ellipsis;
/*控制文本不换行*/
white-space: nowrap;实现富文本两个span标签两端表示：
.bottom span {
/* 使span标签左浮动 */
float: left;
/* 使两个span标签各占据50%的宽度 */
width: 50%;
}
.bottom .span_1 {
color: red;
}
.bottom .span_2 {
color: rgba(128, 128, 128, 0.801);
font-size: 15px;
/* 使标签右对齐 */
text-align: right;
}3、完成如下案例：
图文4代码
通过ul li标签，li标签中分为左右两个div盒子，左边是图片，右边是三个p标签，实现多行文本后的省略号：
多行文本省略号
/* 多行文本的省略号 */
display: -webkit-box; /*伸缩盒模型 */
-webkit-box-orient: vertical;
/* 两行产生省略号 */
-webkit-line-clamp: 2;最后一行的p标签是一个富文本,p标签内一个img标签和一个span标签的组合形式，对于前后文字之间的间距采用内联样式，在img标签内设置style样式为margin-right: 20px实现。
三、定位 position
z-index可以提升层级，值越大的样式越靠前。
position 定位：static、relative、absolute、fixed
1、静态定位static
所有标签的默认值
2、相对定位 relative
参考物：定位前的位置，相对于它本身位置进行定位。
特点：不影响元素本身特性、元素不脱离文档流、相对于原位置进行偏移
3、绝对定位 absolute ---父绝子相
参考物：最近使用了定位的父级，如果没有就按body进行定位
特点：元素脱离文档流、行元素支持所有css样式、块元素内容撑开宽高、不在占满宽度、清除子级的浮动。
4、固定定位 fixed
参考物：浏览器窗口
特性：脱离文档流、清除子级浮动。
可以用于浏览器中的固定标签，不随鼠标滚动而移动，可用于导航栏。
