关于浮动知识的总结

关于浮动知识的总结

1.通常我们为了将几个块级元素排成一列，又或者是我们想要让元素关于父元素进行左定位或者右定位,会将它们的属性设置为float:left或者float:right.
代码如下:

//html:
<div class="div1">
    div1
</div>
<div class="div2">
    div2
</div>

//css:
.div1{
    float:left;
    width: 200px;
    height: 200px;
    background: #000;
}
.div2{
    float:left;
    width: 200px;
    height: 200px;
    background: yellow!
}

效果:

左右浮动:

//html:
<div class="div1">
    div1
</div>
<div class="div2">
    div2
</div>

//css:
.div1{
    float:left;
    width: 200px;
    height: 200px;
    background: #000;
}
.div2{
    float:right;
    width: 200px;
    height: 200px;
    background: yellow!
}

2.浮动虽然用起来很爽，但是浮动会部分脱离文档流，什么是脱离文档流呢？就是其他元素会当浮动元素不存在，其他元素的margin值对浮动元素不起作用，并且浮动元素会遮住后面的元素.
代码如下:

//html:
<div id="left"></div>
<div id="right"></div>

//css:
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}
#right{
    width: 300px;
    height: 300px;
    background: yellow;
}

效果如下:

可以看到背景为黑色的div遮住了黄色的div,为什么会这样呢？因为黄色div在文档流中会无视黑色div的存在，所以黑色div就浮在了上面.
但是为什么我说float是部分脱离文档流呢？因为当元素浮动时，下面的div会被遮住，但是下面的文字不会被掩盖，而是在浮动元素的周围显示！
代码如下:

//html:
<div id="left">
    div1
</div>
<div id="right">
    div2
</div>

//css:
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}
#right{
    width: 200px;
    height: 200px;
    background: yellow;
}

效果:

可以看到黄色的div被黑色div遮住了，但是黄色div的文字却没有被遮盖,我们再看一个例子:

<div id="left">
    div1
</div>
<p>12345自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,自学前端,</p>

//css
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}

效果:

为了更好的看到效果，将浏览器的尺寸调小了点，这样看的更明白，可以看到上面的文字完全浮动在了黑色div的周围，所以说float是部分脱离文档流，很神奇。

3.另外我还发现了浮动的一个奇葩之处，就是当div重叠之后，被遮住的div设置margin-top会带着浮动的元素一起向下移动，但是设置margin-left却没效果.
代码如下:

//html
<div id="left">div1</div>
<div id="right"></div>

//css
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}
#right{
    width: 200px;
    height: 200px;
    background: yellow;
    margin-top: 100px;
}

效果: