css浮动+定位+文字超出隐藏

1. 浮动布局

1.1 特点
1）加了浮动的标签会超出文档流，不占页面位置；
2）浮动的排列优先级比正常文本流排列方式高；
3）非浮动块级元素在浮动元素后面产生重叠时，该块级元素在浮动元素下显示，只有内容不在浮动元素下
1.2 参数
1）float:left; 左浮动
2）float:right; 右浮动
3）float:none; 不浮动
4）float:inherit; 从父元素继承
1.3 清除浮动
1）给其父元素设置一个高度
2）给父元素加上overflow:hidden;
3）给浮动元素后面添加一个同级的.clear

<style>
    .clear{
        clear:both;
    }
</style>
<body>
    <div class="clear"></div>
</body>

1.4 clear参数
1）clear:left；在左侧不允许浮动元素
2）clear:right;在右侧不允许浮动
3）clear:both;在左右两侧不允许浮动
4）clear:none;默认值，允许两侧浮动
5）clear:inherit;规定应该从父元素继承clear属性的值

2. 单行文字超出

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

3. 多行文字超出

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  数字为行数

4.定位

4.1 相对定位relative

1、不会脱离文档流
2、会影响正常文档流排列
3、相对自己本身做移动

4.2 绝对定位absolute

1、会脱离文档流
2、向上查找相对定位，以设置最近祖先相对定位元素为参照物，未找到，以body为参照

4.3 固定定位fixed

1、脱离文档流
2、以窗口为参照物
3、以固定位置存在，不论窗口是否滚动

5. 层级

1、所有标签层级默认为0
2、层级取值范围：负九位数-正九位数
3、、谁的层级大，谁在上面
$\color{orange}{注意}$ 定位元素层级优先级高于普通元素，即使普通元素设置层级比定位元素值大