css实例，两个经典bug，BFC，浮动

居中五环

<div class="plat">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
</div>

.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
    position: absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    border-width: 10px;
    border-style: solid;
}
.circle1{
    border-color: red;
    top:0;
    left:0;
}
.circle2{
    border-color: green;
    top:0;
    left: 130px;
}
.circle3{
    border-color: blue;
    top:0;
    left: 260px;
}
.circle4{
    border-color: gray;
    top:70px;
    left: 65px;
}
.circle5{
    border-color: yellow;
    top:70px;
    left: 195px;
}
/*plat里的子元素是绝对定位，所以plat没有高度*/
.plat{
    width:380px;
    height: 190px;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -190px;
    margin-top:-95px;
}

左右两栏布局

<div class="right">右边</div>
<div class="left">左边</div>

*{
    margin: 0;
    padding:0;
}
.right{
    position: absolute;
    right:0;
    width:180px;
    height:100px;
    background-color: #fcc;
}
.left{
    width: auto;
    margin-right: 100px;
    height:100px;
    background-color: #ffc;
}

左中右三栏布局

<div class="right">右边</div>
<div class="left">左边</div>
<div class="middle">中间</div>

* {
    margin: 0px;
    padding: 0px;
}
div {
    height: 100px;
}
.left {
    position: absolute;
    left: 0;
    width: 100px;
    background-color: #fcc;
}
.right {
    position: absolute;
    right: 0;
    width: 100px;
    background-color: #ffc;
}
.middle{
    margin-left: 100px;
    margin-right: 100px;
    background-color: #fcf
;
}

两个经典bug

margin塌陷问题（存在于互相嵌套的垂直方向上）

我们先来看一个例子

<div class="wrapper">
    <div class="content">
    </div>
</div>

.wrapper {
    width: 100px;
    height: 100px;
    margin-top: 100px;
    margin-left: 100px;
    background-color: yellow;
}

.content {
    width: 50px;
    height: 50px;
    margin-top: 50px;
    margin-left: 50px;
    background-color: red;
}

我们推测的结果是这样的

但实际结果是这样的

子级div的margin-left生效了但是好像margin-top并没有生效？

其实并不是，margin-top也生效了，但是这里的margin-top的效果并不是我们所想的那样距离父级div的距离是50px，而是子级的div距离浏览器边框的距离是50px，由于本身父级div有一个margin-top的值，所以就导致了我们子级的margin-top的效果并没有显现出来，我们再改变一下子级div的margin-top的值，改成200px，我们又会惊奇的发现，子级div不仅没有距离父级div有了一段距离，反而带动了父级div一起向下移动了！这就是margin塌陷现象。

即：父子关系的两个模型，共用一个顶部。谁的margin-top大，选谁的

解决方式：
【1】为父级加一个顶部
【2】bfc原则 (block format context)块级格式化上下级触发不正常规则。

     overflow：hidden； （超出部分隐藏 ）
     display：inline-block；行级块元素本身就触发bfc
     position：absolute；
     float：left；

margin合并问题
我们先来看一个例子

我们现在写两个span标签，并且给它们两个分别加上margin-right和margin-left的样式。

<span class="left">left</span>
<span class="right">right</span>

.left {
      margin-right: 10px;
      background-color: red;
}
.right {
      margin-left: 10px;
      background-color: yellow;
}

我们会发现，这两个span之间的距离正是我们所想的那样是20px的宽度，但是我们现在再写两个div，然后分别给它们加上margin-bottom和margin-top的样式，我们再来看看效果。

<div class=”top”>top</div>
<div class=”bottom”>bottom</div>

.top {
      margin-bottom: 10px;
      background-color: red;
}
.bottom {
      margin-top: 10px;
      background-color: yellow;
}

image.png

这次我们惊奇的发现，这两个div上下之间的距离，并不是我们所想的那样是相加的20px，而是只有10px！
这个现象就是标题所说的margin上下合并现象。

我们尝试改变每一个div的 margin-top或者margin-bottom的值，最后发现：二者上下之间的距离是取得两个数值之中的最大值。
如果div.top的margin-bottom是100px，div.bottom的margin-top是50px的话，那么二者之间的距离就是100px。
即：横向各占各区域，垂直方向，两个兄弟元素，选择margin大的合并区域。

解决方式：触发bfc

overflow：hidden；

浮动模型

首先，我们来看这样一个结构

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

.wrapper {
    width:400px;
    height: 100px;
    border: 3px solid #fcc;
}
.content {
    width: 100px;
    height: 100px;
    background-color: #ffc;
    color: black;
}

此时我们看到的是这个样子的

那么我们现在给content加上一个特殊的属性：float

.content {
    width: 100px;
    height: 100px;
    background-color: #ffc;
    color: black;
    float: left;
}

页面变成了这样

这就是float属性的效果
float属性可以让元素像站队列一样浮动起来，它会让本来占满整行的元素只按照内容和设置的大小来在父级里面进行站队排列，当这一行剩余的空间不足以再放下一个元素的时候，元素就会自动换行，到下一行去进行浮动排列。当容器不够大的时候，虽然内容会超出容器的范围，但是超出之后仍然是按照相同的队形来进行站队。

浮动起来的元素会像absolute的元素脱离文档流，但是不会脱离文字流 这是什么意思呢？

<div class="top"></div>
<div class="bottom">我是文字，我能看到文字流</div>

.top {
    width: 100px;
    height: 100px;
    background-color: #fcc;
    float:left;
}
.bottom {
    width: 200px;
    height: 200px;
    background-color: #ffc;
    color: black;
}

效果如图

<span style="color: #ff0000">脱离文档流的意思就是正常的元素看不到它了，这一点很类似absolute属性，不脱离文字流的意思则是display属性是inline或者inline-block的元素还是可以看到它的，文字本身是inline属性的。</span>
我们将bottom变成行级块元素

.bottom {
    width: 200px;
    height: 200px;
    background-color: #ffc;
    color: black;
    display: inline-block;
}

效果如图

我们发现下面的黑色的方块并没有移动到下一行，而是紧跟着红色浮动方块进行了排列，但是我们并没有给黑色方块也设置浮动效果啊？

float属性会自动将这个元素的display给改成inline-block的，不论你给display加上什么值，只要有float属性，那么这个元素就是inline-block属性的，红色浮动方块不会独占一行。

float属性值

float: left;
float: right;

默认的状态是没有值none

css实例，两个经典bug，BFC，浮动

居中五环

左右两栏布局

两个经典bug

浮动模型

推荐阅读更多精彩内容