提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

CSS 的浮动(float)布局是什么？

CSS
2023-04-18 15:03:28 时间
一、浮动布局

用 float 属性，可以实现元素（文字、图片等）的浮动显示功能，通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题？

二、应用场景
1、图片浮动
img-float
  • 新建 index.html，复制下面代码到文件，用浏览器打开看效果。
<!-- index.html -->
<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>浮动布局</title>

    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
        }

        p {
            line-height: 2;
            word-spacing: 0.1rem;
        }

        img {
            float: left;
            margin-right: 30px;
        }
    </style>
</head>

<body>

    <img src="https://learn-anything.cn/微波炉.jpg" alt="微波炉">

    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
        ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
        orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis
        lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue.
        Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
        eget fermentum sapien.</p>

</body>

</html>
2、首字母下沉
font-float
  • 新建 index.html，复制下面代码到文件，用浏览器打开看效果。
<!-- index.html -->
<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>浮动布局 - 字体</title>

    <style>
        p {
            width: 400px;
            margin: 0 auto;
        }

        p::first-line {
            text-transform: uppercase;
        }

        p::first-letter {
            font-size: 3em;
            border: 1px solid black;
            background: red;
            float: left;
            padding: 2px;
            margin-right: 4px;
        }
    </style>
</head>

<body>

    <p>This is my very important paragraph.
        I am a distinguished gentleman of such renown that my paragraph
        needs to be styled in a manner befitting my majesty. Bow before
        my splendour, dear students, and go forth and learn CSS!</p>

</body>

</html>
3、多列
multi-col-float
  • 新建 index.html，复制下面代码到文件，用浏览器打开看效果。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>3 column layout wrong order</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
        }

        div:nth-of-type(1) {
            width: 36%;
            float: left;
        }

        div:nth-of-type(2) {
            width: 30%;
            float: right;
            margin-left: 4%;
        }

        div:nth-of-type(3) {
            width: 26%;
            float: right;
        }
    </style>
</head>

<body>
    <h1>3 column layout wrong order</h1>

    <div>
        <h2>First column</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
            placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
            nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. </p>
    </div>

    <div>
        <h2>Second column</h2>
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
            posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam
            lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel.</p>
    </div>

    <div>
        <h2>Third column</h2>

        <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
            lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra
            pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent
            dapibus eros vel mi pretium, nec convallis nibh blandit. </p>
    </div>
</body>

</html>
三、潜在问题

浮动布局也会产生一些非预期行为。

1、相邻元素

float布局，会影响后面的元素的排列，可以通过 clear 属性，进行清除。取消下面代码中的注释部分，即可看到修正后的效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Float disaster</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
        }

        div:nth-of-type(1) {
            width: 36%;
            float: left;
        }

        div:nth-of-type(2) {
            width: 30%;
            float: left;
            margin-left: 4%;
        }

        div:nth-of-type(3) {
            width: 26%;
            float: right;
        }

        /* 取消下面注释，即可看到 footer 回到预期最底部的位置 */
        /* footer {
            clear: both;
        } */
    </style>
</head>

<body>
    <h1>Float disaster</h1>

    <div>
        <h2>First column</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
            placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
            nunc, at ultricies tellus laoreet sit amet. </p>
    </div>

    <div>
        <h2>Second column</h2>
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
            posuere sit amet dapibus ut, facilisis sed est. </p>
    </div>

    <div>
        <h2>Third column</h2>

        <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
            lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra
            pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent
            dapibus eros vel mi pretium, nec convallis nibh blandit. </p>
    </div>

    <footer>
        <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you
            wish.</p>
    </footer>
</body>

</html>
2、样式引起的混乱

增加了 border 会改变元素的整体大小，会导致整个布局乱掉。可以用 box-sizing 使得 padding 和 border 包含在 元素内部，同时增加 空div 来消除 float的影响。取消下面注释的代码，即可看到效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fixed layout border-box</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
        }

        div:nth-of-type(1) {
            width: 36%;
            float: left;
        }

        div:nth-of-type(2) {
            width: 30%;
            float: left;
            margin-left: 4%;
        }

        div:nth-of-type(3) {
            width: 26%;
            float: right;
        }

        .column,
        footer {
            padding: 1%;
            border: 2px solid black;
            background-color: red;
        }

        footer {
            clear: both;
        } 

        /* 取消下面注释，可以看到修正后效果 */
        /* .clearfix {
            clear: both;
        }
            
        * {
        box-sizing: border-box;
        }

        footer {
            margin-top: 4%;
        } */

    </style>
</head>

<body>
    <h1>Fixed layout border-box</h1>

    <div class="column">
        <h2>First column</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
            placerat
            vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
            ultricies
            tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
            vel,
            viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis
            lacus.
            Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue.
            Duis
            ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
            eget
            fermentum sapien.</p>
    </div>

    <div class="column">
        <h2>Second column</h2>
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
            posuere
            sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem.
            Vivamus
            tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus
            eu
            urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
            natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>

    <div class="column">
        <h2>Third column</h2>

        <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
            lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra
            pharetra.
            Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros
            vel mi
            pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et
            porta
            scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a
            quam
            posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at
            lorem vel
            sollicitudin.</p>
    </div>

    <!-- 取消下面注释，可以看到修正后效果 -->
    <!-- 用空的div来清除 float 对下面 footer 影响，是推荐做法 -->
    <!-- <div class="clearfix"></div> -->

    <footer>
        <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you
            wish.
        </p>
    </footer>
</body>

</html>
四、参考文档

相关文章