浮动方法实现三列布局的原理

 

方法1 浮动

<style>
    .float>div{
       height: 100px;
    }
    .float .left{
        width: 300px;
        float: left;
        background: red;
    }
    .float .right{
        width: 300px;
        float: right;
        background: blue;
    }
    .float .center{
        background: green;
    }
</style>

<div class="float">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

也许会觉得奇怪的是，为什么中间的写在最后，但却显示在了中间呢？这就要想到浮动的原理。我们知道，浮动的原理就是浮动元素会脱离文档流，根据浮动的方向，向这个方向浮靠，当一个浮动元素脱离文档流后遇到父容器或者另一个浮动盒子容器时，然后浮动停止。它就像是浮动了的一样，脱离文档流后，它会影响后面的元素，浮动元素后面的常规元素将围绕它。所以，在这里就巧妙地运用了浮动原理。先分析左浮动元素，左浮动元素向左浮动，那么首先它脱离了文档流，其次它向左浮动，那么它就会在左边找看有没有另一个浮动元素，这里明显没有，那就继续到上一层找父容器，然后就找到了div.float，这时浮动停止，div.left的左边就紧挨着父元素的左边。

再来到右浮动，首先因为左浮动盒子脱离了文档流，右浮动元素也因此受到了影响，本来如果它没有浮动的话，它还是常规流中的盒子，因为div.left已经脱离了文档流，为了好理解那就暂且认为它不存在了吧，这时div.right就应该是取代了div.left在常规流中的位置的，但div.left由于浮动原因，它不是不存在，而是“漂浮”在了常规流的上面，所以会有盖住常