为什么你不需要学习浮动

浮动的历史背景

浮动（float）属性最初在 CSS 中被引入是为了实现文字环绕图片的效果。

如果没有float，img默认是inline元素，那么文字图片的显示就会像这样：

可以看到，没有使用float时，img元素只能和一行文字在同一行，文字上下有很大的空缺，没有很好的包围效果。浮动就是为了实现文字环绕图片的效果而提出的。

在网页排版的早期阶段，设计和布局的需求逐渐增加，开发者开始利用浮动属性进行复杂的布局设计。这种做法虽然能够实现一些布局效果，但也带来了许多问题和局限性。用浮动来进行复杂的布局实际上背离了浮动的设计初衷。

使用浮动带来的各种问题

高度坍塌问题：

使用浮动布局时，常常会遇到父元素高度塌陷的问题。因为子元素浮动后，不再占据父元素的高度。解决方法是使用清除浮动（clear fix）技术，但这增加了额外的 CSS 代码复杂性。

<div class="collapsed-container">
    <div class="collapsed-item item-1">浮动元素1</div>
    <div class="collapsed-item item-2">浮动元素2</div>
</div>

<style>
    .collapsed-container {
        width: 100%;
        border: 2px solid red;
    }

    .collapsed-item {
        float: left;
        width: 35%;
        height: 100px;
    }

    .item-1 {
        background-color: lightblue;
    }

    .item-2 {
        background-color: lightgreen;
    }
</style>

例如，需要在浮动元素之后添加一个清除浮动的元素，一般用after伪元素实现：

<div class="clearfix-container clearfix">
   <div class="clearfix-item item-1">浮动元素1</div>
   <div class="clearfix-item item-2">浮动元素2</div>
</div>


<style>
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    .clearfix-container {
        width: 100%;
        border: 2px solid red;
    }

    .clearfix-item {
        float: left;
        width: 35%;
        height: 100px;
    }

    .item-1 {
        background-color: lightblue;
    }

    .item-2 {
        background-color: lightgreen;
    }
</style>

难以实现复杂的布局

浮动布局适合简单的左右对齐和文字环绕图片等基本布局，但对于复杂的多列布局或垂直居中等需求，往往需要大量的额外代码和技巧来实现，增加了维护和理解的难度。

在什么情况下可能需要使用浮动？

虽然现代的 CSS 布局技术如 Flexbox 和 Grid 已经几乎完全取代了浮动布局，但在某些特定情况下，浮动仍然有其用武之地：

文字环绕图片

浮动仍然适用于让文本环绕图片的简单场景。例如：

<img src="https://via.placeholder.com/150" alt="示例图片" style="float: left; margin: 0 10px 10px 0;">
<p>这是环绕图片的文字内容。浮动属性在这种场景下仍然非常适用，能够很方便地实现文字环绕图片的效果。</p>

简单的左对齐或右对齐：

当需要简单的左对齐或右对齐元素时，浮动可以作为一种快速解决方案，但仍然要用清除浮动等方式来避免父元素高度坍塌的问题。例如：

.left {
    float: left;
}
.right {
    float: right;
}

更好的布局方案

Flexbox

Flexbox（弹性盒布局）是 CSS3 引入的一种布局模式，非常适合于一维布局。它使得垂直和水平对齐都变得简单，并且可以轻松实现自适应和响应式布局。

例如，使用 Flexbox 创建一个简单的两栏布局，其中左侧内容会占据除右侧内容外的所有宽度：

 <div class="flex-container">
    <div class="flex-left">左侧内容</div>
    <div class="flex-right">右侧内容</div>
</div>


<style>
     .flex-container {
        display: flex;
    }

    .flex-left {
        flex: 1;
        background-color: lightblue;
        padding: 10px;
    }

    .flex-right {
        background-color: lightcoral;
        padding: 10px;
    }
</style>

CSS Grid

CSS Grid 是另一种强大的布局系统，适合用于二维布局。它能够创建更加复杂和精确的布局，同时保持代码简洁和可维护性。

例如，使用 Grid 创建一个三列布局：

 <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item"> Item 3</div>
</div>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 10px;
    }

    .grid-item {
        background: #f0f0f0;
        padding: 10px;
    }
</style>

定位（Positioning）

使用绝对定位和相对定位也可以实现某些特定的布局效果，虽然在大多数情况下不如 Flexbox 和 Grid 那样灵活和强大。

例如，使用绝对定位创建一个固定在页面右下角的按钮：

.button {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

总结

浮动在早期的网页设计中曾经是一种常用的布局工具，但它带来了许多复杂性和问题。如今，有了 Flexbox 和 Grid 这样的现代 CSS 布局技术，大多数布局需求都可以更轻松地实现。因此，除非在非常特定的情况下，一般不再需要学习和使用浮动布局。掌握 Flexbox 和 Grid 才是现代前端开发的关键。

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。