4.浮动、定位、文字超出

1. 浮动布局

1）加了浮动的标签会超出文档流，不占页面位置；
2）浮动的排列优先级比正常文本流排列方式高；
3）非浮动块级元素在浮动元素后面产生重叠时，该块级元素在浮动元素下显示，只有内容不在浮动元素下

1）float:left; 左浮动
2）float:right; 右浮动
3）float:none; 不浮动
4）float:inherit; 从父元素继承

1）给其父元素设置一个高度
2）给父元素加上overflow:hidden;
3）给浮动元素后面添加一个同级的.clear

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

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

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

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

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

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

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

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