css清除浮动的多种方法

已于 2024-03-19 11:29:18 修改
阅读量110 收藏
点赞数
分类专栏： h5+c3 文章标签： css 前端 html
于 2022-07-21 10:04:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65912225/article/details/125905758
版权

目录

浮动导致浮动塌陷

 clear方法

BFC方法

方法一 : 利用overflow

 方法二 : 利用浮动

 方法三:伪元素(最推荐)

浮动导致浮动塌陷

 clear方法

在父元素下面创建一个块级元素的空元素<p>这里有个p标签</p>

或 <br clear="all" / >

缺点:会产生大量的空元素浪费资源

BFC方法

方法一 : 利用overflow

overflow:hidden 或 overflow:auto , overflow规定元素溢出盒子时的情况

 方法二 : 利用浮动

在父元素上添加浮动

缺点:父元素需求上不一定要求浮动,在父元素上添加浮动会影响布局,比较局限

 方法三:伪元素(最推荐)

伪元素相当于给文档添加了一个虚拟的元素,这个虚拟元素可以指定添加到被选中的元素的前面还是后面

卷心菜007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动的方法详解
09-24
为了解决这个问题，开发者们发展出多种清除浮动的方法。下面，我们将详细介绍这些方法，并分析它们的优缺点。 1. **使用带clear属性的空元素** 这是最传统的方法，通常在浮动元素后面添加一个空的`<div>`元素，并...
css常用易忘
qq_60839348的博客
12-02 159
css常用易忘
高度塌陷、万能清除法(高度塌陷)
hello world
05-08 256
高度塌陷: 父元素没有设置高度，其高度是由子元素的高度撑起来的，但子元素发生了浮动，导致父元素无法正确计算高度，其高度变成0， 发生高度塌陷。块元素名称{clear:both;创建公共类 class选择器，可以多次使用;(.clearfix)，有定位（relative与absolute）的元素会被隐藏。优点：没有兼容问题。缺点：结构里会有很多无用的空标签。overflow:hidden属性。前父元素下的其它子元素不能有定位。(触发了BFC条件)在浮动元素末尾 添加。
CSS清除浮动：（万能清除法）
最新发布
Yongqiang Chen的博客
01-17 404
定义一个类名，使用伪元素：after，并把类名赋给被浮动元素的父级元素。CSS清除浮动：（万能清除法）
如何解决浮动元素高度塌陷---CSS
weixin_33896726的博客
03-25 152
解决高度塌陷问题的方法： 方法一、 //给付元素添加声明 overflow:hidden; 缺点：回隐藏溢出的元素； 方法二、 在浮动的元素下添加空div标签，并给该元素添加声明： clear:both; height:0; overflow:hidden; 缺点：在结构里增加了空标签，不利于代码可读性，且降低了浏...
CSS解决高度塌陷的方法
first_hands的博客
03-06 310
当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。给父元素设置overflow：hidden，解决高度塌陷并能实现高度自适应的方法（遵循BFC的显示原则）给父元素设置固定的高度，固定高度后，父元素的高度就无法自适应子元素的高度了。可以看到父元素高度塌陷后，下面的子元素都往上移动了，脱离了文档流。父元素里的子元素会浮动的情况下，要注意高度塌陷问题并解决，
CSS清除浮动方法小结
09-24
为了解决这个问题，有多种清除浮动的方法，本文将详细介绍四种常见的清除浮动方法。 1. **设置父元素高度** 这是最直观的方法，当知道浮动子元素的具体高度时，可以手动为父元素设置一个固定高度。例如： ```css...
CSS清除浮动大全共8种方法
12-13
css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。...
CSS3 清除浮动的方法示例
12-14
虽然有多种清除浮动的方法，但在CSS3中，推荐使用Flexbox或Grid布局来替换传统的浮动布局，因为它们提供了更强大的布局控制和更好的兼容性。但如果需要向后兼容旧版浏览器，或者对特定场景优化，理解并掌握浮动和...
【HTML+CSS】清除浮动
LuWeien的博客
11-29 141
💡在网页中使用float浮动时，可能会遇到高度塌陷的问题。高度塌陷指的是在父元素没有设置高度的情况下，父元素的高度是由子元素的内容撑开，这时候给子元素设置浮动会导致父元素没有高度，从而改变页面布局。💡所谓万能清除法适用于任何清除浮动，也是常用的一种方法。/* 方法二overflow:hidden */clear: 清除浮动所带来的负面影响。/* 方法三加个空盒子清除浮动 *//* 方法四可以写入重置样式 */清除浮动带来的负面影响—高度塌陷。/* 方法一设置高度 *//* 加三行保险 */
.clear 万能清除浮动(clearfix:after)
09-25
有时候我们需要清楚浮动的一些操作，这里介绍的是clearfix:after的实例代码，需要的朋友可以参考下
CSS万能清除浮动法
高先生的猫
02-24 2356
/* 给浮动元素的父级元素加上class='clearfix' */ .clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; } .clearfix { zoom: 1; }
清除浮动的方法汇总
HuLuWa1997的博客
01-25 255
清除浮动的方式有哪些？各自具有怎样的优缺点？ 在开发过程中我们经常会遇到高度塌陷的问题：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。 清除浮动方式1：给父元素单独定义高度 优点：快速简单，代码少 缺点：无法进行响应式布局 清除浮动方式2：父级定义overflow：hidden；zoom：1（针对ie6的兼容） 优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时要注意 清除浮动方式3：在浮动元素后面加一个空标签，clear：both；height：0；overf
八种方法处理CSS浮动问题
阿送
06-04 2790
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie chrome
CSS的万能清除浮动法到底是什么
hfdxmz_3的博客
06-03 382
.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; } .clearfix { zoom: 1;
清除css万能浮动代码
weixin_43299461的博客
06-10 1848
https://blog.csdn.net/java_goodstudy/article/details/53755518
CSS清除浮动的方法（多种）
qq_63108921的博客
04-24 4452
清除浮动的含义是什么？ 清除浮动带来的影响 影响：如果子元素浮动了，此时子元素不能撑开父元素 ➢ 清除浮动的目的是什么？ 需要父元素有高度，从而不影响其他网页元素的布局 注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 clear:both;/* 清除左右两侧浮动的影响 */ 方法： 1、直接设置父元素高度 优点：简单粗暴，方便 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块 2、额外标签法 操.
清除浮动的几种简单方法：万能清除浮动法，clear:both......
wangzhixiangcopy的博客
07-29 9297
方法一：给父级元素添加声明：overflow:hidden;。 例： .wrap{ border:3px solid #000;overflow:hidden;} .box01{ width:500px; height:500px; background:#F00; float:left;} .box02{ width:500px; height:500px; background:#09F; ...
css 伪元素 伪类 使用 万能清除浮动 ..
热门推荐
java_goodstudy的博客
12-20 2万+
参考 http://blog.jobbole.com/49173/ css 伪元素即插入的虚伪元素 像:before :after 插入元素 css 伪类 就是 操作class 样式 利用伪元素清除浮动 ps 利用伪 元素插入的dom 在dom结构中是看不到的 不过可以在css 中看到 .clearfix::after { conte
css清除浮动的作用
07-28
- *2* [前端基础：CSS清除浮动的原因、本质和方法](https://blog.csdn.net/weixin_49555741/article/details/123412490)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值