01、css清楚浮动的三种方案

最新推荐文章于 2024-05-05 01:42:53 发布
最新推荐文章于 2024-05-05 01:42:53 发布
阅读量108 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongmy94/article/details/107373038
版权

方案一：添加空div

实现效果：

 

方案二：利用BFC

实现效果：

方案三：after伪元素，给浮动元素的父元素清除浮动

效果入下：

 

Sukyo_h
关注
专栏目录
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1509
根据《精彩绝伦的css》JS Bin.news{outline:1px solid pink}.col{float: left;width:33%;outline:1px solid blue;}some text-oneConHugeCo has permanently altered the theory of niches. What do we morph? Anything and ev...
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1363
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
CSS清楚浮动
云之彼端的博客
08-09 360
原因 首先我们为什么要清除？ 在一个父元素内如果遇到某个浮动元素，浮动的元素会脱离文档流，所以会造成父元素的高度会发生塌陷。如下图所示。这显然不是我们想要的效果，所以这个时候就需要我们清楚浮动。 解决方案 添加空块级元素（不推荐） 这个方法清除浮动比较简单也比较好理解，在浮动元素的后面添加一个空块元素，给空的块元素添加clear属性的式样，添加的空元素必须是块级元素，不能是行内元素或行内块元素。...
css清除浮动的多种方案
最新发布
2301_82244343的博客
05-05 357
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CSS——清除浮动的六种解决方案
weixin_39037804的博客
08-26 130
内容的高度撑起父元素容器的高度，效果图如下 HTML和CSS代码如下 给ｐ标签加上浮动以后，ｐ｛float：left；｝，此时DIV塌陷，两段内容同行显示，效果如下： 解决方案一：给前面一个父...
Web前端CSS清除浮动的5种方法
艾编程带你学前端博客
02-15 1746
根据实际情况选择适合的方法，需要注意兼容性和语义性问题。在移动端，清除浮动布局的方法与在桌面端是相同的。
全面了解CSS“浮动”
qq_43293207的博客
04-02 478
由于浮动元素的脱离文档流，.box2会忽略浮动元素的原空间（即当其不存在），由因为普通div不设置宽度默认会是父元素宽度。普通的块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，而浮动元素由于其自身会变成一个BFC（块级格式化上下文），不会影响外部元素，所以不会出现margin重叠问题。此时我们发现：没有设置高度的container元素，其实际高度只由标准文档流的box2元素撑起来了21px，而设置了30px高度的浮动元素由于脱离文档流其高度被忽略了。
CSS之元素浮动 (十一)：认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
Good Good Study,Day Day Up!
05-23 1175
沿其容器左侧右侧文本和内联元素环绕它noneleftright。
css设置浮动导致背景颜色无效解决方案
hua_ban_yu的博客
05-15 9392
float浮动会使父元素高度塌陷，父级元素不能被撑开，所以导致CSS背景不能显示。解决方案:    1.对父元素设置高度；    2.对父元素设置 overflow:hidden清除浮动;    3.把父元素也设置为float浮动；...
详解css清除浮动float的七种常用方法总结和兼容性处理
11-21
在CSS布局中，浮动（float）是一个至关重要的概念，它允许元素脱离其正常的文档流，向指定方向移动，直到碰到父元素的边框或其他浮动元素。然而，这种浮动特性会导致一个名为“高度塌陷”的问题，即当父元素的子元素...
CSS3 清除浮动的方法示例
09-24
在CSS3中，虽然浮动仍然是一个有用的布局工具，但现代布局技术如Flexbox和Grid提供了更强大、更灵活的解决方案，减少了对清除浮动的需求。然而，在向后兼容性考虑或特定场景下，理解并熟练运用清除浮动的方法仍然很...
stricky footer的三种解决方案详解
09-27
在CSS中实现stricky footer的设计有多种方法，以下详述三种常见的解决方案： 1. 为内容区域添加最小高度 在早期的网页布局中，为了实现stricky footer，开发者通常会给内容区域添加一个最小高度值，这个值是视窗...
CSS表格与浮动定位
三月nebula
11-03 1302
一、
让DIV在页面中水平居中，垂直居中（非浮动状态）
hongmy94的博客
10-01 8803
HTML: <div style="width:100px;height:100px;border:1px solid red"></div> CSS: 方法一 div{             overflow: auto;             margin: auto;             position: absolute;             ...
左中右布局的两种常用方法
hongmy94的博客
09-19 2149
1、float+absolute <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css&quo
固定容器宽度，内容宽度固定，自适应
hongmy94的博客
11-18 955
一个宽度为400px的容器，里面的三个项目width分别为80px，120px，140px。分别对这项目1和项目2设置flex-grow值为3和1。  
css3动画学习小计
hongmy94的博客
02-11 459
学习了一下css3的动画属性，进行一下相关知识的总结。 主要涉及以下几个属性 animation(动画) 用于设置动画，是一个简写的属性，包含6个属性 transtision(过度) 用于设置元素的样式过度，和animation有着类似的效果，细节上有很大不同 transform(变形) 元素进行 旋转rotate、扭曲skew、缩放scale和移动tra...
19种优化css和加快网站速度的方法
hongmy94的博客
12-03 351
01. 使用简写 比如 p { margin: 1px 2px 3px 4px; } 02. 查找并删除未使用的 CSS 删除不必要的部分 CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，选择Show Coverage，在Cover...
div+css清除浮动塌陷的四种解决方案详解
"本文主要介绍了CSS布局中清除浮动塌陷的四种方法，旨在帮助开发者解决在使用浮动布局时遇到的问题。文章首先解释了浮动的概念及其特性，并通过一个示例演示了浮动导致的塌陷问题。然后，作者详细阐述了如何通过设定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值