07 CSS3布局-下（前端必须掌握）

摘要：在这篇文章，你将会看到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，总结出来的比较重要的知识点，与君共勉。不妥之处，评论区欢迎您！