【float与flex-box布局】

最新推荐文章于 2024-09-27 16:51:59 发布

勤劳的鼹鼠

最新推荐文章于 2024-09-27 16:51:59 发布

阅读量75

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_72286569/article/details/133174274

版权

文章比较了早期的float布局技术，用于文字环绕和整体布局，可能导致高度塌陷，需清除浮动；而现代的Flexbox弹性布局则更强大，不会破坏文档流，更适合现代网页布局，尤其在兼容性和灵活性方面表现出色。

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

float与flex

float（浮动）

早期布局技术：Float 最早是用来实现文字环绕图片等效果的，但后来被用于整体布局。
定位：通过设置元素的 float 属性为 left 或 right，元素会沿着指定的方向浮动，并尝试排列在容器内的空间。
脱离文档流：浮动的元素会脱离文档流，可能导致父容器的高度塌陷，需要通过清除浮动来解决

实现

<body>
    <div class="container">
        <div class="box">语文</div>
        <div class="box">数学</div>
        <div class="box">体育</div>
      </div>
</body>
<style>
    .container {
        width: 100%;
    }

    .box {
        float: left;
        width: 33.33%;
    }
</style>

效果

在这里插入图片描述

flex-box（弹性布局）

Flexbox 是一种现代的、更强大的布局技术，专门设计用于解决网页布局问题。
定位：通过在容器上应用 display: flex;，容器内的子元素成为伸缩项目，可以根据容器的尺寸和排列方式自动调整它们的位置。
文档流：Flexbox 布局不会打破文档流，因此不会导致父容器高度塌陷，也不需要清除浮动。
适用性：Flexbox 非常适合实现水平和垂直居中、等高列布局等现代网页布局需求。它更灵活、强大且易于使用。

实现

<body>
    <body>
        <div class="menu">
            <div class="box">语文</div>
            <div class="box">数学</div>
            <div class="box">体育</div>
          </div>
    </body>
    <style>
        .menu{
            display: flex;
        }
        .box{
            flex: 1;
        }
    </style>