CSS清除浮动的方法

最新推荐文章于 2023-11-26 18:21:44 发布
最新推荐文章于 2023-11-26 18:21:44 发布
阅读量164 收藏
点赞数
文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59675455/article/details/123304059
版权
本文探讨了在CSS布局中，当子元素设置左浮动后，背景高度无法撑开导致的塌陷现象。文章介绍了三种解决方法：一是使用空标签并设置clear:both；二是创建BFC，通过overflow:hidden或auto属性；三是利用伪元素结合display:block清理浮动。这些方法旨在帮助开发者更好地理解和处理浮动元素带来的布局挑战。
摘要由CSDN通过智能技术生成

请添加图片描述
请添加图片描述
首先如上图创建好的一个菜单，当我给子元素添加左浮动时，但是背景高度没有撑开，导致塌陷问题如下图：请添加图片描述
方法一： 创造一个空标签（块元素），在样式中设置为clear:both（比较简单，不推荐）请添加图片描述
方法二：创建BFC 可以包含住浮动的子元素 --设置overflow:hidden/auto；
请添加图片描述
方法三：使用伪元素进行清理浮动，伪元素默认为行元素，因为clear：both只对块元素生效，所以需要先将伪元素转成块元素（使用display：block转成块元素）请添加图片描述

weixin_59675455
关注
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
CSS清除浮动方法汇总
10-20
本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`，则元素不会出现在左侧有浮动元素的地方；`clear:right`不让...
CSS——清除浮动的办法
sleepwalker_1992的专栏
05-08 1097
<div> <ul> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ul> </div> &
CSS清除浮动的五种方式
Manson_zh的博客
07-04 1223
浮动元素会影响整体的布局，但是有些情况又不得不让元素浮动来更好的构成页面，下面整理五种常用的清楚浮动的方法： （注：为了节省时间，将方法写在了class名内，看懂即可） 1，为父元素添加高度： class="float_left">左 height:200px class="float_right">右 height:200px 如上简写，只需给父元素设置heigh
CSS清除浮动五种方式详解
wshwsh_的博客
07-27 2196
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
CSS清除浮动的五种方法(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-23 1万+
浮动的原理是让图片脱离文档流，直接浮在桌面上。我们一般布局的时候都是只设置宽度不设置高度，让内容来自动填充高度。但使用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局会产生混乱,造成高度塌陷,这时候就可以利用清除浮动来解决父元素高度塌陷的问题。解决方法一(clear),解决方法二(overflow:hidden),解决方法三(给父元素添加高度),解决方法四(额外标签法),解决方法五(使用after伪元素清除浮动)
CSS清除浮动的八种方法
最新发布
m0_74577714的博客
11-26 1486
这个是清除浮动常用的方法复制可用height: 0;zoom: 1;切记给浮动的父元素添加。
CSS清除浮动方法小结
09-24
为了解决这个问题，有多种清除浮动的方法，本文将详细介绍四种常见的清除浮动方法。 1. **设置父元素高度** 这是最直观的方法，当知道浮动子元素的具体高度时，可以手动为父元素设置一个固定高度。例如： ```css...
CSS清除浮动方法总结
09-25
以下是对这些清除浮动方法的详细解释： 1. 加入空`div`并设置`clear: both`： 这是早期常用的清除浮动方法。在浮动元素之后添加一个额外的`<div>`元素，并设置`clear: both`，使其占据整个宽度，从而使父元素重新...
CSS清除浮动方法大全(小结)
09-22
CSS清除浮动是前端开发中常见的一个问题处理方法，它主要针对的是当子元素使用了浮动（float）属性后，无法自动撑开父元素高度的问题。这是因为浮动元素脱离了标准文档流，父元素无法检测到其高度，从而导致布局问题...
css清除浮动的四种方法(详细)
weixin_45842954的博客
06-01 1万+
css清除浮动的四种方式
css清除浮动的几种方式
潮汐未见潮落的博客
05-30 1万+
CSS 清除浮动的几种常用方法
CSS的浮动及清除浮动的5种方法
web前端开发
11-13 4824
浮动是布局的时用到的一种技术，能够方便我们进行布局。1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认）2、浮动的原理：使...
八种方法处理CSS浮动问题
阿送
06-04 2833
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie chrome
CSS清除浮动的方法（多种）
qq_63108921的博客
04-24 4501
清除浮动的含义是什么？ 清除浮动带来的影响 影响：如果子元素浮动了，此时子元素不能撑开父元素 ➢ 清除浮动的目的是什么？ 需要父元素有高度，从而不影响其他网页元素的布局 注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 clear:both;/* 清除左右两侧浮动的影响 */ 方法： 1、直接设置父元素高度 优点：简单粗暴，方便 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块 2、额外标签法 操.
css-清除浮动的原理与方法
大小都是愁的成长之路
05-21 5867
一.什么是清除浮动？1.浮动的缺陷浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要...
Css清除浮动常用方法
LUOandHUANG的博客
06-21 3754
1、为什么要浮动 首先我们要知道为什么要给元素设置浮动。HTML中标签分为：块级标签，行内标签，行内块标签。其中块级标签和行内块标签以及行内标签的排列方式是不一样的，块级标签是独占一行的，而行内块元素和行内元素是在同一行内排列的，只有当排满或者容不下元素时才会另起一行显示。因此想要块级元素在同一行内显示，或者想要设置元素浮动对齐的方式就需要将元素浮动起来。css中float属性用来设置元素的浮动，...
css清除浮动的六种方法
m0_45884629的博客
02-22 3320
css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现。 总结了一共六种方法其中有两种最为常用： 1、height属性给父元素设置固定高度 当父元素下的子元素进行了浮动时，我们可以给父元素设置固定的高度让父元素的高度高于子元素。 缺点：父元素的高度是固定的当子元素的高度变化需要修改父元素比较麻烦。 适用点：父子元素的高度都是固定的时候。 2、clear元素 css中有clear元素属性有三个 right清除右浮动 left清除左浮动 both清除所有浮动 clear可以清除浮动
【CSS】清除浮动的几种方法
qing_小诺的博客
02-01 2098
清除浮动是每一个web前端必须掌握的技能，下面就来看看有哪些方法吧。 以下面的场景为例，给大家展示一下不清除浮动带来的“车祸现场”。例子中有两个div，一个div1，一个div2，div1中包含一个向左浮动的div和一个向右浮动的div，为方便观察，给他们都添加了背景颜色，代码如下： css: &lt;style type="text/css"&gt; .div1{backg...
8种CSS清除浮动方法详解及适用场景
CSS清除浮动是前端开发中一项至关重要的技能，因为浮动元素可能会对页面布局产生意想不到的影响，如改变容器高度、破坏行内元素的正常排列等。本文将详细介绍八种清除浮动的方法，旨在帮助前端开发者解决在实际项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值