摘要：在这篇文章，你将会看到CSS中的罕用布局以及一些你平时不留神的点。非常适合初学者！大鹏一日同风起，扶摇直上九万里！一起学习，一起提高！

1、浮动 float

代码如下：

<div class="float-div">Float</div><p>It's brave new world out there. Our children are belong put in increasing more competitive situations............</p>
.float-div{    float: left;    background: yellowgreen;    width: 150px;    height: 150px;    margin-right: 30px;}

成果如下：

  • float：有四个可能的值，left（左浮动）、right(右浮动)、none（默认不浮动）、inherit（继承父元素的浮动属性）。
  • 革除浮动（clear）：对于所在浮动上面的本身不浮动内容也将会围绕浮动元素进行包装，要想解决这个问题，能够用clear属性。有三个值，left(进行任何流动的左浮动)、right（进行右浮动）、none（进行左右浮动）。

2、定位 position

  • 动态定位：是默认行为。position:static;
  • 绝对定位：position:relative;联合top/bottom/left/right四个属性应用。
  • 相对定位：position:absolute;与其余的层独立开来，联合top/bottom/left/right四个属性应用。
  • 定位上下文：相对定位的元素的绝对地位元素，若要相对定位的元素的绝对地位元素，则这个元素肯定要蕴含相对定位元素。
  • z-index：正值示意将它们挪动到堆栈上方，负值示意将它们挪动到堆栈下方。默认状况下，定位的元素都具备z-index为auto，实际上为0。
  • 固定定位：绝对于浏览器视口自身。position: fixed;
  • 粘性定位：position: sticky;能够创立一个滚动索引页面，在此页面上，不同的题目会停留在页面底部。（上面的列表项能够设置多一些，能力看到成果哦！）

html代码：

<h1>Sticky positioning</h1><dl>    <dt>Brave new world</dt>        <dd>Apple</dd>        <dd>Ant</dd>        <dd>Altimeter</dd>    <dt>The best start in life</dt>        <dd>Bird</dd>        <dd>Buzzard</dd>        <dd>Bee</dd>        <dd>Banana</dd>    <dt>Top course choices</dt>        <dd>Calculator</dd>        <dd>Cane</dd>        <dd>Camera</dd>     ......</dl>

CSS代码：

dt {  position: sticky;  background-color: black;  color: white;  padding: 10px;  top: 0;  left: 0;  margin: 1em 0;}
practice:
晓得了这么多，快为一所大学社区做一个漂亮的排版吧！
源码能够参考https://github.com/unique008/...。

(end)

以上均是参考最权威的MDN Web Docs，总结进去的比拟重要的知识点，与君共勉。不妥之处，评论区欢迎您！