clearfix清除浮动的4种写法

最新推荐文章于 2022-08-09 15:47:40 发布
最新推荐文章于 2022-08-09 15:47:40 发布
阅读量344 收藏
点赞数
文章标签： css3 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a877189987/article/details/120985001
版权
本文介绍了四种清除浮动的方法，包括额外标签法、父级添加overflow、after伪元素法和双伪元素清除法，旨在解决因浮动元素导致的父级元素高度塌陷问题，确保页面布局的正确显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.额外标签法:

 

 

 

在后面添加一个新标签，再写一个clear的样式 

2.父级添加overflow方法

 3.after伪元素方法

 

 

伪元素默认是行元素，所以要转成块元素

 

:after伪元素相当于 在后面添加了一个盒子（块元素)

4.双伪元素清除方法

 

 

I care541
关注
重温清除浮动方法，逐句解释clearfix的意义
Lifesama的博客
09-20 1168
清除浮动，clearfix，单伪元素清除浮动，双伪元素清除浮动
清除浮动的几种方式，各自的优缺点、如何垂直居中一个浮动元素? 水平居中的方法、垂直居中的方法？
星辰迷上大海的博客
01-02 1021
清除浮动的方式有直接设置浮动父元素高度 height、额外标签法、单伪元素清除法 :after 和 zoom 、伪元素清除法，各有优缺点；垂直居中浮动元素可以使用 Flexbox 布局实现；垂直居中一个 可以使用 CSS 的 vertical-align 属性；
浅谈css清除浮动(clearfix和clear)的用法
12-13
本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML>   <html lang="en-US">   <head>       <meta charset="UTF-8"/>       <title>如何在html中使用clearfix和clear</title>       <link
清除浮动clearfix的写法
hfdxmz_3的博客
04-30 472
.clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}
【css】清除浮动（clearfix 和 clear）的用法
dengrongshou5105的博客
07-31 375
本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了，具体样式点击此处。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： <!DOCTYPE HTML> <html lang="en-US"> <head>...
clearfix的用法
Legend的博客
11-20 2171
如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有 clear，导致不能被撑开。看下面的例子： div 的布局如下： css的写法如下： 浏览器的显示如下： 传统的解决方法如下： 但是，这么多加一个DIV有点不妥。一是多了一个没有意义的DIV，二是在用dojo做Drag & Drop的时候，由于这个DIV是容器DIV的一个字
clear-fix清除浮动的两种写法
dfe3318的博客
03-31 287
1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; } 2. [代码]clea...
xhtml+css清除浮动的3种方法
05-22
### XHTML + CSS清除浮动的三种方法 在XHTML与CSS页面重构过程中，处理浮动元素是一项关键技术。当元素被设定为浮动后，它们会脱离正常的文档流，并向左或向右移动，直到碰到容器边缘或其他浮动元素。这为布局带来...
清除浮动的样式？
最新发布
04-01
引用2和4提到使用clearfix类，通过::after伪元素添加内容并清除浮动，其中引用2还提到了display: table的重要性。引用3解释了clear属性的作用，如left、right、both。引用4中的代码示例有拼写错误，比如dispplay和...
前端爱好者的小白学习之路 4-2 CSS学习笔记-一篇就看懂浮动 重点：清除浮动；浮动特性-脱标
一碗菜粥的博客
02-18 1097
实际开发中常用的三种布局方式有：（不包括移动端学习的新的布局方式）浮动 标准流 定位 想要做好web开发 就一定要学好这三种摆放盒子的方法~ 这篇小文儿 就来总结一下 浮动 的相关知识 什么是浮动？ CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 在之前的学习中 我们布局都使用的标准流 但在实际开发中 好多问题用标准流无法解决 这时候 我们的“浮动“就闪亮登场啦！ 标准流的使用场景 纵向的盒子放在一列的时候
css清除浮动clearfix:after的用法详解（附完整代码）
01-21
网上常用的完整代码： CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after {        content:;        display:table;    }    .clearfix:after{        clear:both;        overflow:hidden;    }    .clearfix{        *zoom:1;    }   如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div
清除浮动 clearfix
MOUNTAIN_SEA1的博客
08-09 1634
清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。 父级有了高度， 就不会影响下面的标准流了。
使用 after 伪类清除浮动
weixin_30826095的博客
03-01 203
以前清除浮动的时候总是在想要清除浮动的元素后面添加 1 <div style="clear:both;"></div> 或者写在br标签里面来解决，但这样会增加无语义的标签，下面是用after伪类实现，兼容多种浏览器 1 .clearfix:after{ 2 content:""; 3 display:block; 4 hei...
stylus实现的通用clearfix清除浮层代码。
SilenceJude的博客
08-28 832
目的：清除浮层，包括内容和占位。 实现：在公用css或者base.styl里面写入 .clearfix display: inline-block &amp;amp;:after display: block content: &quot;.&quot; height: 0 line-height: 0 clear: both visibility: hidden...
clearfix清除浮动
天空一角的梦
07-04 795
为什么要使用 clearfix（清除浮动）。通常我们在写html+css的时候，如果一个父级元素内部的子元素是浮动的（float），那么常会发生父元素不能被子元素正常撑开的情况。&lt;div class="container clearfix"&gt; &lt;div class="left"&gt;left&lt;/div&gt; &lt;div class="right"&amp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值