内容居中

.main{
  display: flex;
  justify-content: center;
  align-items: center;
}

flex实现上下居中，最简单。

背景图片自适应，宽度100%还是高度100%。

html,
body{
  width: 100%;
  height: 100%;
}
body{
  margin: 0;
  background: url("../images/bg.jpg") no-repeat center center / 100% auto;
}
@media screen and (max-aspect-ratio: 1920/1080) { 
  body{
    background-size: auto 100%;
  }
}

1920/1080是背景图片的宽高比

清除浮动

.clearfix:after{
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size:0;
}

我最喜欢用的方法

文本超出隐藏

超出部分显示省略号

单行文本的溢出

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

多行文本的溢出

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