每天一个知识点：浮动效果？清除浮动？这一篇就够了！

Mio_02
270 阅读6分钟

前 言

    今天我们来聊一聊如何在HTML中实现浮动效果。在HTML和CSS中，浮动（float）是一种用于布局元素的技术，通常用于将元素移动到页面的左侧或右侧，并使其环绕其他元素。浮动效果通常用于创建多列布局、图文混排以及实现其他复杂的页面布局。

正 文

三种元素

    在实现效果之前，让我们先从基础的讲起，聊一聊三种主要元素类型：

    1.块级元素

  • 在页面上生成一个新的块级框，它从页面的左边到右边占据整个可用宽度。换句话说，块级元素会始终在页面上占据一整行，类似于一个独立的容器。
  • 块级元素通常用于组织和分隔页面内容，例如<div>、<p>、<h1>、<ul>、<li>等。
  • 块级元素可以包含其他块级元素和行内元素。
  • 可以设置宽高。

    2.行内元素

  • 行内元素在页面上不会创建新的块级框，它们只占据其内容所需的水平空间，通常出现在文本之中。
  • 行内元素通常用于包含文本或其他行内元素，例如<a>、<strong>、<em>、<span>等。
  • 行内元素不可以设置宽度、高度、上下外边距，但可以设置水平内边距和边框。

    3.行内块元素

  • 行内块元素通常用于创建水平排列的元素，同时允许它们具有块级元素的盒子模型属性。
  • 行内块元素表现得像行内元素一样，但它们可以具有块级元素的属性。
  • 它们在水平方向上排列，但可以包含内容。
  • 可以设置宽高。
    Tips：代码换行会导致行内块之间有间距

浮动效果的特点

1.脱离文档流：浮动元素脱离了正常的文档流，不再占据垂直空间。这可能会影响后续元素的布局，因此需要小心处理以避免潜在的布局问题。

2.文字环绕：浮动元素通常用于实现文字环绕图片或其他媒体元素的效果。文本会自动围绕在浮动元素周围，创造出专业的印刷风格排版。

3.让块级元素同行显示：默认情况下，块级元素会独占一行，但浮动效果能让块级元素在同一行显示。

4.让行内元素可设置宽高

5.可以使用margin，但是不能使用margin：0 auto；

    Tips：浮动只能左浮和右浮，但定位可以定位在父容器的任意位置。

例子

    说了这么多，不如让我们来练练手，就拿下面这张图所示的百度搜索界面当例子：

image.png

    我们可以看出这个界面大致由块1、块2、百度图标以及搜索栏四个部分组成。我们需要让块1待在左上角；块2浮动到右上角；图标以及搜索栏水平居中。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度</title>
    <style>
        .left {
            width: 400px;
            height: 50px;
            background: #df6f6f;
            float: left;
        }
        /* 我们用红色色块代替块1 */
        .right {
            width: 300px;
            height: 50px;
            background: #ecee69;
            float: right;
        }
        /* 我们用黄色色块代替块2 */
        .search {
            text-align: center;/* 搜索栏居中 */
        }
        img {
            display: block;/* 强行定义为块级元素使图标独占一行 */
            width: 300px;
            margin: 0 auto; /* 块级元素水平居中的常用方法 */
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="head">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="search">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
            <input type="text">
        </div>
    </div>
</body>
</html>

    最后得到的效果如图：

image.png

清除浮动（带来的负面影响）

    有小可爱就纳闷了，咱辛辛苦苦弄好的浮动效果，怎么还要清除呢？不要误会，这里的清除指的是把浮动效果带来的负面影响清除掉。浮动效果在某些时候可能导致页面布局的混乱、高度塌陷、文本重叠和兼容性问题，所以这时候就需要我们掌握一些清除这些影响的方法。

1.给父容器设置高度：这是最容易想到也是最笨的方法，并且高度设置后是固定的，假如我们的几个行内块元素因显示问题换行时，设置的固定高度就不管用了，也就会导致问题。

2.在最后一个浮动元素后面添加新的元素，在新元素上做 清除浮动（clear: left/ right/ both）：假如有①②③个元素，当我声明了全局浮动之后，我想让②之后的元素不再浮动，那我只需要在②③之间放上一行clear代码，这样浮动的“水流”就会被clear这座“大山”挡的严严实实，后面的元素就不再受：水流影响了。

3.在下方被浮动影响的容器上做 清除浮动：直接给被浮动影响的容器添加一个清除浮动的效果。

4.在父容器伪元素after上做 清除浮动：定义一个clear类名直接加一个伪元素：

.clear::after {
            content: '';
            clear: both;
            display: block; /* 强行将伪元素声明成块级元素 */
        }

每一个有浮动效果的父容器最后都可以用这个伪元素来清除浮动。

5.BFC容器：这个让我们单独拿出来细说一下。

BFC 容器 （Block Formatting Content 块级格式化上下文）

    简单来说，BFC具有以下特点和作用：

  1. 块级元素的独立容器：BFC会将内部的块级元素隔离开，使它们不会影响到外部元素的布局，从而避免一些布局问题。
  2. 避免外边距折叠：相邻块级元素的外边距在BFC中不会发生折叠，这有助于保持外边距的间隔，以避免不必要的布局间距问题。
  3. 内部元素垂直排列：BFC内的块级元素通常会垂直排列，而不会浮动或重叠，这有助于创建多列布局和复杂的布局效果。
  4. 清除浮动：浮动元素在BFC中可以被包含，这有助于清除浮动，防止浮动元素对后续元素的影响。（这便是本文我们所需要的作用）

    那么哪些属性可以创建BFC容器呢？

  • float: left || right;
  • position: absolute || fixed;
  • display: inline-block; 变成BFC容器，且不脱离文档流
  • display: table-cell...; 大部分table开头属性和table本身都可以
  • overflow: hidden || auto || overlay || scroll; 用的最多
  • display: flex || inline-flex; 弹性盒子

结语

    总而言之，浮动效果是一种用于页面布局和排版的重要CSS技术，尽管有一些负面影响（如高度塌陷、清除浮动等问题），但它仍然是一种有用的布局工具，特别适用于简单的布局需求。然而，现代CSS布局技术，如Flexbox和Grid Layout，提供了更强大、更易于管理的替代方法，特别适用于复杂的布局。因此，在实际开发中，开发者需要根据具体需求选择最合适的布局技术。如果以上内容对你有帮助的话，希望能给博主一个免费的小心心♡呀~

avatar
文章
阅读
粉丝