CSS定位模式

定位模式有三种：

1. 常规流（Normal Flow）
2. 浮动（Float）
3. 绝对定位（Absolute Positioning）

一、常规流

• 除根元素、浮动元素和绝对定位元素外，其他元素都在常规流之内（in-flow)
• 而 根元素、浮动和绝对定位的元素会脱离常规流（out of flow）
• 常规流中的盒子，属于块级格式化上下文或行级格式化上下文

1、块级格式化上下文

• Block Formatting Context （BFC）
• 盒子在容器（包含块）内从上到下一个接一个地放置
• 两个兄弟盒之间的竖直距离由margin属性决定
• 同一个BFC内垂直margin会合并
• 盒子的左外边缘挨着容器（包含块）的左边

2、行级格式化上下文

• Inline Formatting Context（IFC）
• 盒子一个接一个水平放置
• 盒之间的水平margin，border和padding都有效
• 同一行的盒子所在的矩形区域叫行盒（Line box）
• 当一个行盒放不下上下文内所有盒子时，会被分到多个垂直堆叠的行盒内
• 行盒内的水平分布由text-align属性决定
• 如果一个行级块无法分割（单词、inline-block），该元素被作为一个整体决定分布在哪一个行盒

二、浮动

• 浮动元素从常规流中脱硫，被漂浮在容器（包含块）左边或右边
• 浮动盒会一直飘到其外边缘挨到容器边缘或另外的浮动盒
• 浮动元素不会影响其后面的流内块级盒
• 但是浮动元素后面的行级盒子会变短以避开浮动元素

例如，如下代码（p标签不受影响，而span受影响）

<section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525777625955&di=98ad6656d5ee7a7b4f8334fed398d36f&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fc55b83d5cdedaff8d78877690037cedd734353bb.jpg" width="120" alt="house">
        <p><span>GOT7是韩国JYP Entertainment于2014年推出的男子组合，七名成员包括林在范（JB [1]  ）、朴珍荣（JinYoung）、段宜恩（Mark）、王嘉尔（Jackson）、崔荣宰（YoungJae）、BamBam、金有谦（YuGyeom）。2014年1月16日正式出道，是JYP娱乐推出的首个HIPHOP组合，擅长表演“Martial Arts Tricking”；1月20日，GOT7发行首张迷你专辑《Got it？》；10月22日，GOT7发行首张日文单曲《AROUND THE WORLD》在日本正式出道；11月18日，GOT7发行首张正规专辑《Identify》；2015年1月14日、22日，GOT7获得第19届韩国金唱片电子音源新人奖与年度最具爱心奖，第24届首尔歌谣大赏新人奖。2016年4月29日至8月21日，GOT7开启第一次世界巡回演唱会“FLY”；9月27日，GOT7发行第二张正规专辑《FLIGHT LOG : TURBULENCE》</span></p>
    </section>
    <style type="text/css">
        img{
            float: left;
        }
        p{
            font-size: 14px;
            line-height: 1.8;
            border: 1px solid black;
        }
    </style>

1、clear：指定元素那一边不能与之前的浮动框相邻，取值：left | right | both

最常用的清除浮动的方法：

.clearfix::after{
    content:' ';
    display:block;
    clear:both;
    height:0;
    overflow:hidden;
}

2、BFC的特性

• BFC内的浮动不会影响到BFC外部的元素
• BFC的高度会包含其内的浮动元素
• BFC不会和浮动元素重叠
• BFC可以通过overflow:hidden等方法创建