學習！

1、CSS清除浮動的方法

　　（1）新增標籤清除浮動：

　　　　　　在浮動元素結尾處，並列的新增標籤<div style="clear:both;"></div>。（增加無意義標籤不建議使用）

<ul>
    <li style="float: left;"></li>
    <li style="float: left;"></li>
    <li style="float: left;"></li>
    <div style="clear:both;"></div>
</ul>

　　（2）偽類元素清除浮動（常用）

HTML:

<ul class="clearfix">
    <li>我是列表1</li>
    <li>我是列表2</li>
    <li>我是列表3</li>
</ul>

CSS:
 .clearfix:after {
    content: '';
    width: 0;
    display: block;
    visibility: hidden;
    clear: both;
}       

　　（3）浮動的父元素新增overflow: hidden;zoom: 1;來清除浮動  

2、div居中

　　（1）定義寬度效果明顯

div {
　　width: 520px;
   margin: 0 auto;
}

　　（2）常用,position也可換成absolute

div {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

　　（3）

div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
}

3、文字溢位，顯示省略號

　　（1）單行文字溢位

p {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

　　（2）多行文字溢位時，該方法適用於 -webkit核心so多用於手機端,PC有點涼涼

p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

　　（3）多行文字溢位用偽類模擬

div {
    position:relative;
    width: 250px;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    font-size: 16px;
}
div span:after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: "...";
    font-size: 16px;
}