补充知识和BFC

1、当浮动和绝对定位：浏览器会让float：none;绝对定位生效。
包含块：视口(viewport)浏览器可视区域，检查器不算可是区域，
fixed(固定定位)一般用于导航、页面底部、广告(左下角、右下角、侧边栏)。
举个栗子：

<header>
     <nav>固定位置</nav>    
 </header>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis minima architecto maiores? Aliquam excepturi commodi velit quae nisi magni. Ea fuga facilis voluptatibus quos minus quo illum sunt aliquam molestiae esse quam ut voluptates dolorem natus quod doloribus odio vero ex recusandae soluta officia qui perspiciatis, similique repellat. Enim officiis animi id excepturi, porro ad perferendis atque eum libero veritatis!</p> amet, consectetur adipisicing elit. Debitis minima architecto maiores? Aliquam excepturi commodi velit quae nisi magni. Ea fuga facilis voluptatibus quos minus quo illum sunt aliquam molestiae esse quam ut voluptates dolorem natus quod doloribus odio vero ex recusandae soluta officia qui perspiciatis, similique repellat. Enim officiis animi id excepturi, porro ad perferendis atque eum libero veritatis!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis veritatis eligendi rem quibusdam officiis reprehenderit, fugiat vel alias amet! Praesentium molestiae dolores totam magni corporis dolorum iste ipsa. Sed excepturi, voluptatibus quaerat, maxime hic, vel debitis rerum minima laborum quo quasi odio id harum est inventore eaque. Harum doloremque nostrum excepturi alias delectus quos qui esse? Nam fuga commodi consectetur mollitia accusantium voluptas deserunt ullam sed, veritatis voluptatibus ab nostrum ut pariatur ea libero delectus voluptatem soluta repellat corrupti labore. Nemo odio maxime nesciunt dolorum eos eveniet dolores. Necessitatibus perferendis quibusdam saepe cupiditate hic, totam nesciunt est quaerat sint eveniet harum, beatae ducimus laboriosam cum expedita! Commodi consequatur iusto, fuga iure officia omnis tempora, illo natus laboriosam, facilis enim voluptate et earum neque. Incidunt reprehenderit excepturi nisi eum quas porro sed, et cupiditate quae adipisci corrupti. Harum omnis porro quasi corporis id eum voluptatibus, aspernatur perspiciatis doloribus molestias at amet nesciunt suscipit velit fuga aliquid repellat alias quos. Natus pariatur eos odit harum. Quisquam magnam illo magni quidem sint, repellat minus placeat? Eius fugit similique quam blanditiis velit a laborum provident, in non mollitia reiciendis quaerat ab accusamus repellat veritatis tenetur dignissimos deserunt exercitationem, placeat repellendus, quis odit laudantium nemo.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi consequuntur sapiente sint earum esse, quidem inventore sequi voluptates voluptate vitae.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis minima architecto maiores? Aliquam excepturi commodi velit quae nisi magni. Ea fuga facilis voluptatibus quos minus quo illum sunt aliquam molestiae esse quam ut voluptates dolorem natus quod doloribus odio vero ex recusandae soluta officia qui perspiciatis, similique repellat. Enim officiis animi id excepturi, porro ad perferendis atque eum libero veritatis!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis veritatis eligendi rem quibusdam officiis reprehenderit, fugiat vel alias amet! Praesentium molestiae dolores totam magni corporis dolorum iste ipsa. Sed excepturi, voluptatibus quaerat, maxime hic, vel debitis rerum minima laborum quo quasi odio id harum est inventore eaque. Harum doloremque nostrum excepturi alias delectus quos qui esse? Nam fuga commodi consectetur mollitia accusantium voluptas deserunt ullam sed, veritatis voluptatibus ab nostrum ut pariatur ea libero delectus voluptatem soluta repellat corrupti labore. Nemo odio maxime nesciunt dolorum eos eveniet dolores. Necessitatibus perferendis quibusdam saepe cupiditate hic, totam nesciunt est quaerat sint eveniet harum, beatae ducimus laboriosam cum expedita! Commodi consequatur iusto, fuga iure officia omnis tempora, illo natus laboriosam, facilis enim voluptate et earum neque. Incidunt reprehenderit excepturi nisi eum quas porro sed, et cupiditate quae adipisci corrupti. Harum omnis porro quasi corporis id eum voluptatibus, aspernatur perspiciatis doloribus molestias at amet nesciunt suscipit velit fuga aliquid repellat alias quos. Natus pariatur eos odit harum. Quisquam magnam illo magni quidem sint, repellat minus placeat? Eius fugit similique quam blanditiis velit a laborum provident, in non mollitia reiciendis quaerat ab accusamus repellat veritatis tenetur dignissimos deserunt exercitationem, placeat repellendus, quis odit laudantium nemo.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi consequuntur sapiente sint earum esse, quidem inventore sequi voluptates voluptate vitae.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis minima architecto maiores? Aliquam excepturi commodi velit quae nisi magni. Ea fuga facilis voluptatibus quos minus quo illum sunt aliquam molestiae esse quam ut voluptates dolorem natus quod doloribus odio vero ex recusandae soluta officia qui perspiciatis, similique repellat. Enim officiis animi id excepturi, porro ad perferendis atque eum libero veritatis!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis veritatis eligendi rem quibusdam officiis reprehenderit, fugiat vel alias amet! Praesentium molestiae dolores totam magni corporis dolorum iste ipsa. Sed excepturi, voluptatibus quaerat, maxime hic, vel debitis rerum minima laborum quo quasi odio id harum est inventore eaque. Harum doloremque nostrum excepturi alias delectus quos qui esse? Nam fuga commodi consectetur mollitia accusantium voluptas deserunt ullam sed, veritatis voluptatibus ab nostrum ut pariatur ea libero delectus voluptatem soluta repellat corrupti labore. Nemo odio maxime nesciunt dolorum eos eveniet dolores. Necessitatibus perferendis quibusdam saepe cupiditate hic, totam nesciunt est quaerat sint eveniet harum, beatae ducimus laboriosam cum expedita! Commodi consequatur iusto, fuga iure officia omnis tempora, illo natus laboriosam, facilis enim voluptate et earum neque. Incidunt reprehenderit excepturi nisi eum quas porro sed, et cupiditate quae adipisci corrupti. Harum omnis porro quasi corporis id eum voluptatibus, aspernatur perspiciatis doloribus molestias at amet nesciunt suscipit velit fuga aliquid repellat alias quos. Natus pariatur eos odit harum. Quisquam magnam illo magni quidem sint, repellat minus placeat? Eius fugit similique quam blanditiis velit a laborum provident, in non mollitia reiciendis quaerat ab accusamus repellat veritatis tenetur dignissimos deserunt exercitationem, placeat repellendus, quis odit laudantium nemo.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi consequuntur sapiente sint earum esse, quidem inventore sequi voluptates voluptate vitae.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis minima architecto maiores? Aliquam excepturi commodi velit quae nisi magni. Ea fuga facilis voluptatibus quos minus quo illum sunt aliquam molestiae esse quam ut voluptates dolorem natus quod doloribus odio vero ex recusandae soluta officia qui perspiciatis, similique repellat. Enim officiis animi id excepturi, porro ad perferendis atque eum libero veritatis!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis veritatis eligendi rem quibusdam officiis reprehenderit, fugiat vel alias amet! Praesentium molestiae dolores totam magni corporis dolorum iste ipsa. Sed excepturi, voluptatibus quaerat, maxime hic, vel debitis rerum minima laborum quo quasi odio id harum est inventore eaque. Harum doloremque nostrum excepturi alias delectus quos qui esse? Nam fuga commodi consectetur mollitia accusantium voluptas deserunt ullam sed, veritatis voluptatibus ab nostrum ut pariatur ea libero delectus voluptatem soluta repellat corrupti labore. Nemo odio maxime nesciunt dolorum eos eveniet dolores. Necessitatibus perferendis quibusdam saepe cupiditate hic, totam nesciunt est quaerat sint eveniet harum, beatae ducimus laboriosam cum expedita! Commodi consequatur iusto, fuga iure officia omnis tempora, illo natus laboriosam, facilis enim voluptate et earum neque. Incidunt reprehenderit excepturi nisi eum quas porro sed, et cupiditate quae adipisci corrupti. Harum omnis porro quasi corporis id eum voluptatibus, aspernatur perspiciatis doloribus molestias at amet nesciunt suscipit velit fuga aliquid repellat alias quos. Natus pariatur eos odit harum. Quisquam magnam illo magni quidem sint, repellat minus placeat? Eius fugit similique quam blanditiis velit a laborum provident, in non mollitia reiciendis quaerat ab accusamus repellat veritatis tenetur dignissimos deserunt exercitationem, placeat repellendus, quis odit laudantium nemo.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi consequuntur sapiente sint earum esse, quidem inventore sequi voluptates voluptate vitae.</p>

CSS样式设置：

header{
    width:100%;
    height: 60px;
    position: fixed;
    top:0;
    background-color: red;
}

p{
    margin-top:70px;
}

以上就可以设置导航栏规定位置。
2、index(决定元素显示前后，尽量不用这个属性)：默认值0，数值越高靠前。
举个栗子：

 <article>
     <div class="box1">1</div>
     <div class="box2">2</div>
     <div class="box3">3</div>
 </article>

CSS样式设置：

article{
    width: 400px;
    height: 500px;
    border:1px solid red;
    margin:0 auto;
    position: relative;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    z-index: 1;
}
.box2{
    width: 100px;
    height: 100px;
    background-color:blue;
    position: absolute;
    top:10px;
    left:20px;
}
.box3{
    width: 100px;
    height: 100px;
    background-color:skyblue;
    position: absolute;
    top:20px;
    left:40px;
    z-index: -1;
}

overflow(超出部分依然显示)：默认值：visible 、它的属性,hidden(最常用、超出部分隐藏)、auto：水平方向超出，横向滚动条 垂直方向超出，纵向滚动条，scroll(不管有没有超出 两个方向都有滚动条)。

BFC(块级格式上下文)

BFC它是一块独立的渲染区域，它规定了该区域的常规流块盒布局，
以下元素会在其内部创建BFC:
1、根元素(HTML)。
2、浮动和绝对定位。
3、overflow不等于visible的块盒。
4、display等于flex、inline-block、table-cell、table-caption。
创建BFC规则：
1、清楚浮动。
2、它的边框盒不会与浮动元素重叠(可用于两栏布局)。
3、不会与子元素进行外边框合并。
1和2overflow加在非浮动、3 overflow加在父元素。