清除浮动的方法

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量51 收藏
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52372037/article/details/128927188
版权

一、为什么要清除浮动

浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响下面盒子的正常显示。

<!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>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

</html>

在这里插入图片描述
发现box盒子变成了一根线，footer盒子跑到damao,ermao盒子的后面去了，这是因为box盒子没有高度，在没有设置浮动之前damao,ermao子盒子会把box父盒子撑开，一旦给子盒子设置浮动，它们就会立即脱离标准流浮动起来（就是离开父盒子），而父盒子没有设置高度，在失去子盒子支撑的时候就会变成一条横线，随即下面的footer盒子就会跟随父盒子跑上去。这就是造成高度塌陷的原因。
所以我们需要清除浮动，将浮动的子盒子重新塞回父盒子，让footer盒子正常显示。

二、清除浮动的五种方法

1.给父级盒子添加高度

    .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            height: 200px;
        }

原理

造成高度塌陷的原因就是因为父盒子没有高度，所以我们只需要给父盒子设置一个高度即可。

缺陷

有很多局限性，子盒子依然是脱离标准流。更改高度很麻烦。

2.额外标签法

<!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>
      .box {
          width: 800px;
          border: 1px solid blue;
          margin: 0 auto;
      }

      /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
      .damao {
          width: 300px;
          height: 200px;
          background-color: purple;
          float: left;
      }

      .ermao {
          width: 200px;
          height: 200px;
          background-color: pink;
          float: left;
      }

      .footer {
          height: 200px;
          background-color: black;
      }

      .clear {
          clear: both;
      }
  </style>
</head>

<body>
  <div class="box">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <!-- 把浮动元素隔开 -->
      <div class="clear"></div>
      <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
      <!-- <span class="clear"></span> -->
  </div>
  <div class="footer"></div>
</body>

</html>

原理

额外标签法在浮动元素末尾添加一个空的标签。给这个标签设置clear属性。（这个标签必须是块级元素）
clear:both的作用是不允许周围有浮动现象，所以就可以达到清除浮动的效果。

缺陷

对于比较复杂的页面就会显得结构非常的乱，不推荐使用。

3.给父级添加overflow属性

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

<!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>清除浮动之父元素overflow</title>
  <style>
      .box {
          width: 800px;
          border: 1px solid blue;
          margin: 0 auto;
          /* overflow: auto也行 */
          /* 清除浮动 */
          /* 外边距合并的时候我们也是通过overflow: hidden去解决的 */
          overflow: hidden;
      }

      /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
      .damao {
          width: 300px;
          height: 200px;
          background-color: purple;
          float: left;
      }

      .ermao {
          width: 200px;
          height: 200px;
          background-color: pink;
          float: left;
      }

      .footer {
          height: 200px;
          background-color: black;
      }
  </style>
</head>

<body>
  <div class="box">
      <!-- 大毛和二毛的父亲是box -->
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <!-- 把浮动元素隔开 -->
      <!-- <div class="clear"></div> -->
      <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
      <!-- <span class="clear"></span> -->
  </div>
  <div class="footer"></div>
</body>

</html>

缺陷

无法显示溢出部分

4.给父级添加after伪元素

利用after伪元素定义一个clearfix类，浮动元素的父级元素调用此类可以实现清除浮动的效果。（*zoom: 1这个属性是为了兼容低版本的浏览器）

.clearfix::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        /* IE6、7 专有 */
        *zoom: 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>清除浮动之after伪元素</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* clearfix这个名字可以改 只是习惯用clearfix */
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* overflow: auto也行 */
            /* 清除浮动 */
            /* 外边距合并的时候我们也是通过overflow: hidden去解决的 */
            overflow: hidden;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

</html>

原理

与额外标签法异曲同工。利用伪类向浮动元素的父盒子后面添加一个块级元素。

缺陷

照顾低版本浏览器。

5.双伪元素

给父元素添加
在这里插入图片描述

<!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>
        .clearfix:before,
        .clearfix:after {
            content: "";
            /* 把模式转换成表格 */
            display: table;
        }

        /* 清除浮动 */
        .clearfix:after {
            clear: both;
        }

        /* clearfix这个名字可以改 只是习惯用clearfix */
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* overflow: auto也行 */
            /* 清除浮动 */
            /* 外边距合并的时候我们也是通过overflow: hidden去解决的 */
            overflow: hidden;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

</html>
澈如冬雪^
关注
常用的清除浮动的方法
JackieDYH的博客
03-02 553
清除浮动 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动 例子 .news { background-color: gray; border: solid 1px black; } .news img { float
CSS清除浮动方法
rubylLc的博客
04-29 460
当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。
清除浮动方法
程序员南境
03-24 467
清除浮动的三种方式
清除浮动方法（6种）
weixin_44572736的博客
01-19 1073
清除浮动方法清除浮动的方法1. **方法一**；2.方法二3.方法三 **高度清除浮动法**4.方法四 **用overflow清除浮动**5.方法五 用clear 标签清除浮动6.方法六 用定位清除浮动 浮动元素代码 float属性：让元素进行浮动 left 左浮动； right 右浮动； 清除浮动元素属性 clear属性：清除浮动； left 在左侧不允许浮动元素； right 在右侧不允许浮动...
清除浮动方法大全
m0_67859656的博客
11-06 603
清除浮动方法总结
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1329
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
CSS 浮动和清除浮动方法总结
WangMin@汪末末
09-17 480
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 什么是浮动 float？ 标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。 div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只要
清除浮动的常用方法
sinat_38944746的博客
11-24 2070
清除浮动常用方法
CSS为何清除浮动以及清除浮动方法总结
qq_59079803的博客
02-27 2009
CSS为何清除浮动以及清除浮动方法总结 一，浮动布局的注意点 浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后再用内部子元素采取浮动排列左右位置 一个元素浮动了，理论上其余的兄弟元素也要浮动：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流 二，为什么需要清除浮动？ 由于父级盒子在很多的情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0，就会影响下面的标准流盒子 由于浮动元素不再占有原文档流的位置，所以会对后面的元素排版产生影响 三，清除浮动的本质 1
CSS清除浮动方法小结
09-24
为了解决这个问题，有多种清除浮动的方法，本文将详细介绍四种常见的清除浮动方法。 1. **设置父元素高度** 这是最直观的方法，当知道浮动子元素的具体高度时，可以手动为父元素设置一个固定高度。例如： ```css...
CSS清除浮动方法总结
09-25
以下是对这些清除浮动方法的详细解释： 1. 加入空`div`并设置`clear: both`： 这是早期常用的清除浮动方法。在浮动元素之后添加一个额外的`<div>`元素，并设置`clear: both`，使其占据整个宽度，从而使父元素重新...
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
CSS清除浮动方法汇总
10-20
在CSS布局中，浮动元素（float）是一种常用的技术，它允许...随着技术的发展，现代布局方法如Flexbox和Grid正逐渐成为主流，而传统的清除浮动方法逐渐被淘汰。不过，理解这些方法的原理对于解决布局问题仍然很有帮助。
CSS清除浮动方法大全(小结)
09-22
CSS清除浮动是前端开发中常见的一个问题处理方法，它主要针对的是当子元素使用了浮动（float）属性后，无法自动撑开父元素高度的问题。这是因为浮动元素脱离了标准文档流，父元素无法检测到其高度，从而导致布局问题...
CSS-Day3
m0_74039531的博客
09-29 398
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 404
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS 盒子属性
m0_74012211的博客
10-02 439
CSS 盒子属性
【CSS】position
最新发布
小秀的博客
10-02 330
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
8种CSS清除浮动方法详解及适用场景
本文将详细介绍八种清除浮动的方法，旨在帮助前端开发者解决在实际项目中遇到的兼容性和布局问题。 1. 父级div定义height 当浮动元素导致父级元素高度塌陷时，可以通过为父级div设置一个明确的高度来解决问题。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值