如何清除浮动带来的不利影响

wszwx55 2022-08-10 18:41:49

1、给父元素设置高度

2、额外标签法不推荐使用

3、给父元素加溢出隐藏.

4、双伪元素清除浮动

...全文

99 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

CSDN-Ada助手 2023-01-13

打赏
举报

回复

您可以前往 CSDN问答-前端发布问题, 以便更快地解决您的疑问

Re：CCNA_CCNP 思科网络认证静态路由（默认路由、路由汇总、浮动路由、热备份路由协议（HSRP）） ====================== # 本章内容网络畅通的条件 ...

浮动元素会脱离文档流，导致不占据页面空间，所以会对父元素带来高度塌陷。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0。为解决浮动带来的负面影响，需要清除浮动。 清除浮动的方式有很多种，实现的原理主要是靠clear属性，和触发新的BFC。 清除浮动的方法归纳为以下几点： 1.直接设置父元素高度。优势：简单弊端：必须要知道父元素高度是多少。 2.设置父元素浮动。优势：代码少，无语义化问题我们知道，元素浮动后会创建一个独立的BFC区域，在这个区域中计算高度时需要..

来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。 <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>设计模式&...

清除浮动影响的4种方法：（推荐使用方案四，兼容性最好）方案一.clearfix{clear:both;} 原理：在父元素中，追加空子元素，并设置其clear属性为both clear是css中专用于清除浮动的属性作用：清除当前元素前面的元素浮动所带来的影响取值： 1、none 默认值，不做任何清除浮动的操作 2、left 清除前面元素左浮动带来的影响

💡在网页中使用float浮动时，可能会遇到高度塌陷的问题。高度塌陷指的是在父元素没有设置高度的情况下，父元素的高度是由子元素的内容撑开，这时候给子元素设置浮动会导致父元素没有高度，从而改变页面布局。💡所谓万能清除法适用于任何清除浮动，也是常用的一种方法。/* 方法二overflow:hidden */clear: 清除浮动所带来的负面影响。/* 方法三加个空盒子清除浮动 *//* 方法四可以写入重置样式 */清除浮动带来的负面影响—高度塌陷。/* 方法一设置高度 *//* 加三行保险 */

39,087

社区成员

5,547

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章