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

最新推荐文章于 2022-03-26 19:28:11 发布

yin_991

最新推荐文章于 2022-03-26 19:28:11 发布

阅读量1.4k

点赞数 2

分类专栏： css3学习扫盲-2019.1.27 BFC 文章标签： css浮动布局原理

本文链接：https://blog.csdn.net/yin_991/article/details/86672831

版权

本文详细解析了使用浮动方法实现三列布局的工作原理，通过分析左浮动和右浮动的影响，以及如何处理不等高度的三列布局问题。通过创建BFC（块级格式化上下文）避免了内容溢出，确保中间列自适应的同时保持布局整洁。

摘要由CSDN通过智能技术生成

方法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由于浮动原因，它不是不存在，而是“漂浮”在了常规流的上面，所以会有盖住常