css清除浮动（css清除浮动的几种方法）

zhezhongyun 2025-05-02 14:49 6 浏览

css清除浮动

1.需要清除浮动的原因

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

2.清除浮动的方法1,额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>
</html>

不推荐的原因:添加无意义的标签，语义化差

3清除浮动方法2 给父元素添加overflow:hidden

.fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

原理:触发了b f c

不推荐使用：因为如果父元素中的字元素内容的高度超过父元素的高度那么溢出的部分会被隐藏掉

4 清除浮动方法3 使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block; // 伪元素都是内联元素， clear:both;只对块级元素起作用
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

推荐使用:符合闭合浮动的思想，结构语义化正确

总结：

通过上面的列子，我们不难发现清除浮动的方法可以分为两类：

利用clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素

今天清除浮动就给大家分享这么多，希望大家能够一起学习一起进步。请关注知乎，头条，掘金，公众号，前端明明，大家一起学习交流前端知识。我会把这些文章的视频发布在知乎，和今日头条上，希望大家支持。

HTML meta charset 属性

上一篇：css——定位（css定位总结）
下一篇：CSS:绝对定位、相对定位、固定定位

css清除浮动（css清除浮动的几种方法）

css清除浮动

1.需要清除浮动的原因

2.清除浮动的方法1,额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

3清除浮动方法2 给父元素添加overflow:hidden

4 清除浮动方法3 使用after伪元素清除浮动（推荐使用）

总结：

今天清除浮动就给大家分享这么多，希望大家能够一起学习一起进步。请关注知乎，头条，掘金，公众号，前端明明，大家一起学习交流前端知识。我会把这些文章的视频发布在知乎，和今日头条上，希望大家支持。

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

css清除浮动（css清除浮动的几种方法）

css清除浮动

1.需要清除浮动的原因

2.清除浮动的方法1,额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

3清除浮动方法2 给父元素添加overflow:hidden

4 清除浮动方法3 使用after伪元素清除浮动（推荐使用）

总结：

今天清除浮动就给大家分享这么多，希望大家能够一起学习一起进步。请关注知乎，头条，掘金 ，公众号， 前端明明，大家一起学习交流前端知识。我会把这些文章的视频发布在知乎，和今日头条上，希望大家支持。

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

今天清除浮动就给大家分享这么多，希望大家能够一起学习一起进步。请关注知乎，头条，掘金，公众号，前端明明，大家一起学习交流前端知识。我会把这些文章的视频发布在知乎，和今日头条上，希望大家支持。