23、CSS基础——浮动

lvh98

已于 2022-08-10 16:54:00 修改

阅读量430

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html 学习

于 2022-02-22 23:17:04 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/123077568

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

浮动

文章目录

浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1、常规流
2、浮动
3、定位

1. 应用场景

1.1 文字环绕

文字环绕

文字环绕的效果，与浮动盒和常规流盒的排布方式有关，且涉及到匿名行盒的概念，具体在下面会详细介绍。

1.2 横向排列

例如，百度主页的菜单栏，这种横向排列可以使用行块盒，也可以使用浮动实现。

但是，行块盒在使用中可能会出现空白折叠等问题，因此常用浮动实现横向排列。且浮动的兼容性较好，许多低版本的浏览器都可以使用浮动。
CSS3也可以实现页面的相关布局，比如flex布局等，但是由于浮动的兼容性比较好，因此浮动是非常有必要掌握的知识。

横向排列例

2. 浮动的基本特点

2.1 float属性值

none：默认值，float为默认值none的情况下，视觉格式化模型为常规流，float: none;；
left：左浮动，元素靠上靠左，float: left;；
right：右浮动，元素靠上靠右，float: right;。

2.2 浮动的基本特点：

1.当一个元素浮动后，元素必定为块盒（更改display属性为block）；

浮动的元素其display值一定是block，因此浮动中不用考虑行盒和块盒的区别。
此处应当注意，块盒在常规流中是独占一行，而在浮动中并非如此，而是宽度适应内容。

2.浮动元素的包含块，和常规流一样，为父元素的内容盒。

3. 盒子尺寸

1.宽度为auto时，适应内容宽度；

因此浮动中的块盒并不独占一行，而是适应内容的多少来调整宽度。
常规流中宽度为auto的作用是将剩余空间吸收。

2.高度为auto时，适应内容高度，与常规流一致；

不论哪一种视觉格式化模型，盒子高度设为auto的含义都是适应内容高度。

3.margin为auto时，为0；

注意区别常规流中margin为auto时的作用，常规流中，margin水平方向auto吸收剩余空间，垂直方向为0。

4.边框、内边距、百分比设置与常规流一致。

4. 盒子排列

1.左浮动的盒子靠上靠左排列；

2.右浮动的盒子靠上靠右排列；

3.浮动盒子在包含块中排列时，会避开常规流块盒；
避开常规块盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 1000px;
            height: 500px;
            background-color: lightblue;
        }
        .item{
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid;
            /* background: red;
            color: #fff; */
            font-size: 2em;
        }
        .nomal{
            height: 60px;
            background-color: #008c8c;
            color: #fff;
            font-size: 2em;
            line-height: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nomal">常规块盒</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
    </div>
</body>
</html>

4.常规流块盒在排列时，无视浮动盒子；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 1000px;
            height: 500px;
            background-color: lightblue;
        }
        .item{
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid;
            /* background: red;
            color: #fff; */
            font-size: 2em;
        }
        .nomal{
            height: 60px;
            background-color: #008c8c;
            color: #fff;
            font-size: 2em;
            line-height: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="nomal">常规块盒</div>
    </div>
</body>
</html>

虽然此处常规流块盒的位置无视浮动盒，但是文字内容却被挤出。这与下面介绍的匿名行盒有关。

5.常规流行盒在排列时，会避开浮动盒子；

如果文字没有在行盒内，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。这也是第4点附图中文字被挤开的原因。
因此可以说文字一定在行盒当中。

利用此点可以做出文字环绕效果（图片设为浮动，文字被匿名行盒包裹，行盒在排列避开浮动盒，因此就会出现文字环绕在图片周围的效果）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img src="../../图片素材/HTML&CSS.jpg" alt="" style="width: 200px; float: left;">
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, autem. Mollitia vitae consectetur assumenda sequi excepturi, magnam doloribus hic officia aut rerum quibusdam enim est ut accusamus recusandae, laboriosam sit reprehenderit fugit velit ratione quam, possimus laudantium ducimus. Voluptatibus minima inventore at sit. Odit magni accusantium, accusamus quaerat earum expedita omnis eaque a modi autem neque explicabo. Corporis ratione tenetur deserunt. Dolor ratione beatae, atque molestias ea autem accusantium at, rerum ducimus velit maxime est aperiam nulla alias nobis architecto doloremque neque adipisci nam incidunt veritatis. Quam, quibusdam consequatur vero natus repudiandae tenetur voluptatem obcaecati pariatur similique, aperiam quod autem sunt corrupti velit repellat odit iste fugit quaerat ipsam! Ea est vitae qui vero nulla eos, modi sit corrupti expedita perferendis, aut blanditiis fugiat. Perferendis nisi fugit ducimus saepe mollitia unde officiis similique magnam dolorem perspiciatis. Natus laboriosam, praesentium beatae vel tenetur repellat dicta cupiditate eligendi in similique est odio culpa iusto hic provident assumenda molestias, perspiciatis placeat! Voluptates eaque ea, iusto commodi, dolorum esse et pariatur repellat fugit dolor architecto eveniet, reprehenderit quam quae. Quae incidunt dolore dignissimos nisi odio debitis sed, placeat neque labore mollitia at beatae adipisci, pariatur culpa aliquid itaque id inventore! Perferendis suscipit voluptas quo sapiente omnis repellendus quam, pariatur similique. Impedit laboriosam neque assumenda? Quibusdam, quis iste dolor quisquam vero ratione beatae cupiditate consequuntur maxime perspiciatis ex molestias aperiam tenetur veritatis possimus necessitatibus aut reprehenderit optio sint eius ipsam aspernatur illum odit unde. Cupiditate atque illo sed, dolorem fuga doloremque nostrum, fugiat commodi corrupti possimus nesciunt quam architecto, animi suscipit velit recusandae reprehenderit maiores! Non ab repudiandae quidem labore tempore debitis illo, aliquid corporis blanditiis possimus accusamus molestias facere laudantium iure sed dolorem tenetur neque doloribus quas temporibus nobis animi ut fuga! Excepturi eum natus praesentium esse eius est accusamus error. Voluptates, magni laborum?
        </p>
    </div>
</body>
</html>

文字环绕
虽然p元素是块盒，位置无视作为浮动盒子的img元素，但是其文字内容包裹了匿名行盒，所以会避开浮动盒子。

6.外边距合并不会发生

5. 高度坍塌

高度坍塌的根源：常规流盒子的自动高度（height为auto默认值），在计算时，不会考虑浮动盒子。

例如，下面常规流父子元素，父元素的高度是默认，即auto，适应内容的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background: lightblue;
            padding: 5px;
        }
        .item{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 5px;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

常规流状况
但是，当我们把子div元素设为浮动，那么就会出现下图这样的高度坍塌，浮动盒并不会撑起父元素常规流盒子的自动高度。

高度坍塌的解决方法：清除浮动（涉及css属性：clear）

关于clear属性：

none：默认值
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除浮动，该元素必须出现在前面所有浮动盒子的下方

例如，给之前高度坍塌的例子中，利用clear属性解决高度坍塌的方法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background: lightblue;
            padding: 5px;
        }
        .item{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 5px;
            float: left;
        }
        .clearfix{
            clear: left;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="clearfix"></div>
    </div>
</body>
</html>

如上代码段，我们在浮动盒子的下方添加了一个元素，并给这个元素设置样式clear: left;，这样就可以解决由左浮动盒造成的高度坍塌。

解决高度坍塌1
为了更简便解决这个问题，我们还有下面的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background: lightblue;
            padding: 5px;
        }
        .item{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 5px;
            float: left;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: left;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>