盒模型——清除浮动的讲解和运用

原创已于 2025-06-02 18:56:57 修改 · 346 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css #web前端 #html

于 2025-06-02 18:54:39 首次发布

一、前言

在页面布局时，浮动属性的确能帮助用户实现良好的布局效果，但如果使用不当就会导致页面出现错位的现象。当容器的高度设置为 auto 且容器的内容中有浮动元素时，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外导致页面出现错位，这个现象称为浮动溢出。

为了防止浮动溢出现象的出现而进行的 CSS 处理，叫作清除浮动。清除浮动即清除掉元素 float 属性。在 CSS 样式中，浮动与清除浮动（clear）是相互对立的，使用清除浮动不仅能够解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。

语法格式：

clear:none | left lright | both

参数：none 允许两边都可以有浮动对象，both 不允许有浮动对象，left 不允许左边有浮动对象，right 不允许右边有浮动对象

二、清除浮动

清除浮动在布局中至关重要，它能解决因子元素浮动导致父元素高度塌陷等问题。根据 CSS 规范，不同的清除浮动属性有不同要求：

① clear:both：该盒子必须出现在所有左浮动和右浮动盒子的下方。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部，进而强制父盒子重新计算高度，直到高度能包裹所有浮动盒。

示例代码：

<div style="border: 2px solid red;">
  <div style="float: left; width: 100px; height: 100px; background: lightblue;">左浮动</div>
  <div style="float: right; width: 100px; height: 100px; background: lightgreen;">右浮动</div>
  <div style="clear: both; background: pink;">clear: both 元素</div>
</div>

② clear:left：该盒子必须出现在所有左浮动盒子的下方。要是前方有左浮动盒子，浏览器会把该盒子下推到所有左浮动盒子的最底部，然后强制父盒子重新计算高度，直至能包裹所有左浮动盒。

示例代码：

<div style="border: 2px solid red;">
  <div style="float: left; width: 100px; height: 100px; background: lightblue;">左浮动</div>
  <div style="float: right; width: 100px; height: 100px; background: lightgreen;">右浮动</div>
  <div style="clear: left; background: pink;">clear: left 元素</div>
</div>

③ clear:right：该盒子必须出现在所有右浮动盒子的下方。当前方存在右浮动盒子时，浏览器会将该盒子下推到所有右浮动盒子的最底部，从而强制父盒子重新计算高度，直到能包裹所有右浮动盒。

示例代码：

<div style="border: 2px solid red;">
  <div style="float: left; width: 100px; height: 100px; background: lightblue;">左浮动</div>
  <div style="float: right; width: 100px; height: 100px; background: lightgreen;">右浮动</div>
  <div style="clear: right; background: pink;">clear: right 元素</div>
</div>

何时使用哪种清除方式：

clear: both：大多数情况下使用，彻底解决浮动塌陷问题
clear: left：当只需要清除左浮动，允许右浮动元素并排时使用
clear: right：当只需要清除右浮动，允许左浮动元素并排时使用

三、综合练习

运用清除浮动的方法来解除高度塌陷问题

未使用清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动导致的高度塌陷</title>
    <style>
        article {
            width: 600px;
            border: 3px solid black;
            background-color: gray;
        }
        
        .float-box {
            width: 100px;
            height: 50px;
            float: left;
            border: 3px solid black;
            margin: 5px;
        }
        
        #co1 { background-color: aqua; }
        #co2 { background-color: seagreen; }
        #co3 { background-color: hotpink; }
        #co4 { background-color: purple; }
    </style>
</head>
<body>
    <article>
        <div id="co1" class="float-box">1</div>
        <div id="co2" class="float-box">2</div>
        <div id="co3" class="float-box">3</div>
        <div id="co4" class="float-box">4</div>
        <!-- 移除了清除浮动的元素 -->
    </article>
</body>
</html>

运行结果：

使用清除浮动：

<!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>清除浮动</title>
    <style>
        article {
            width: 600px;
            border: 3px black solid;
            background-color: gray;
        }
        #co1 {
            width: 100px;
            height: 50px;
            float: left;
            border: 3px black solid;
            background-color: aqua;
        }

        #co2 {
            width: 100px;
            height: 50px;
            float: left;
            border: 3px black solid;
            background-color: seagreen;
        }
        #co3 {
            width: 100px;
            height: 50px;
            float: left;
            border: 3px black solid;
            background-color: hotpink;
        }
        #co4 {
            width: 100px;
            height: 50px;
            float: left;
            border: 3px black solid;
            background-color: purple;
        }
        #co5 {
            /* height: 0px; */
            /* background-color: gray; */
            clear: both;
        }
        
    </style>
</head>
<body>
    <article>
        <div id="co1">1</div>
        <div id="co2">2</div>
        <div id="co3">3</div>
        <div id="co4">4</div>
        <div id="co5">清除浮动的盒子</div>
    </article>
       
</body>
</html>

运行结果：