清除浮动的7种方法

最新推荐文章于 2021-07-27 19:34:01 发布
最新推荐文章于 2021-07-27 19:34:01 发布
阅读量66 收藏
点赞数
原文链接：http://www.cnblogs.com/qianduanjingying/p/4837942.html
版权

子元素浮动后，父容器高度塌陷：

高度塌陷啦！父容器包不住子元素啦！
 

方法1：增加标签clear:both

增加标签 <div style="clear: both;"></div>
 
 

方法2：增加标签

增加标签 <br clear="all" /> 
 

方法3：父容器使用::after伪元素清除浮动

父容器div增加class="clearfix"
 

方法4：父容器overflow:hidden

父容器设置样式overflow:hidden
 

方法5：父容器overflow:auto

父容器设置样式overflow:auto
 

方法6：父容器设置display

父容器设置样式display:table
 

方法7：父容器也浮动

父容器设置样式float:left

转载于:https://www.cnblogs.com/qianduanjingying/p/4837942.html

anhuang1896
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
清除浮动的四种方法
A_home的博客
11-21 2784
浮动的元素会脱离标准流（文档流），浮动的盒子不再保留原先的位置，清除浮动的本质就是清除浮动元素带来的影响，策略——闭合浮动
html清除浮动有几种方法,HTML中清除浮动的几种方法
weixin_33554514的博客
06-22 1648
清除float的常见几种方式：清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素。例如实例：清除容器中子元素的浮动，让父元素塌陷的高度恢复。CSS代码：.content{width:100px;border:1px dotted red;}.div-test{width:100px;height:100px;border:1px dotted black;}.son{margin:5p...
清除浮动的七种方法
m0_50569176的博客
07-27 3635
浮动元素会脱离文档流，导致不占据页面空间，所以会对父元素带来高度塌陷。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0。 为解决浮动带来的负面影响，需要清除浮动。 清除浮动的方式有很多种，实现的原理主要是靠clear属性，和触发新的BFC。 清除浮动的方法归纳为以下几点： 1.直接设置父元素高度。 优势：简单 弊端：必须要知道父元素高度是多少。 2.设置父元素浮动。 优势：代码少，无语义化问题 我们知道，元素浮动后会创建一个独立的BFC区域，在这个区域中计算高度时需要..
八种方法处理CSS浮动问题
阿送
06-04 2796
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie chrome
详解清除浮动的多种方法
完善飞跃
03-06 3063
有段时间不写文章了, 以后正确不间断. 清除浮动, 这一篇文章足矣. #浮动让我们既爱又恨爱, 有了浮动我们可以更加方便的布局.恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了).为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.正所谓万变不离其宗有如下
清除浮动
前端入门神器
03-10 354
清除浮动的四种方式及其原理理解 本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 一、为什么要清除浮动 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题...
[转]清除浮动的几种方法
weixin_30721077的博客
04-28 135
注：本文转自：http://bbs.miaov.com/viewthread.php?tid=431&extra=page%3D2浮动是一个有意思（你也可以说它很麻烦）的CSS属性，任何元素设置了浮动，层级就提高了，会影响它后面没设置浮动的元素，这些倒霉的被影响者会跑到浮动层的下面去（当然IE6、IE7除外），代码看起来是这样：<div style="width: 100px; he...
清除浮动的五种方法详解
热门推荐
qq_43692768的博客
11-07 2万+
前言：   在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。   清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。 实例：   HTML代码基本代码 <!DOCTYPE html> <html lang="
清除浮动的三种实用方法
welcomejc2的博客
04-11 2162
清除浮动什么是浮动方法一：给父元素添加overflow属性方法二：在浮动元素后面添加一个带有clear属性的div新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UM...
html清除浮动的6种方法示例
10-26
为了解决这个问题，有多种清除浮动的方法。本文将详细介绍其中的六种。 1. **使用浮动(float)**： - `float: left` 或 `float: right` 会使元素向左或向右浮动，从而允许它们在同一行内显示。 - 浮动元素会脱离...
css 清除浮动的新方法
09-25
最后，文件中还讨论了使用overflow:hidden属性作为清除浮动的另一种方法，这种方法简单粗暴，但同样有其适用场景和限制。比如当子元素定位到部分或全部在父元素之外时，使用overflow:hidden会导致父元素裁剪超出的...
CSS清除浮动大全共8种方法
09-25
这是一种优雅的清除浮动方法，不影响HTML结构，且对大多数现代浏览器兼容良好。 7. **使用CSS Flexbox**： 灵活布局（Flexbox）是现代CSS布局的标准，通过设置`display:flex`，可以自动处理子元素的排列和空间分配...
css清除浮动的几种方法以及对应规范说明
09-25
以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个元素会向下移动，直到它不在与任何浮动元素相邻。这通常用于浮动元素之后的非浮动元素，或者在...
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
常见5种生活用品(钟表、剪刀、牙刷、遥控器、吹风机)识别检测数据集5479张含yolo格式和voc格式两类标签(第2部分)
08-15
由于数据集太大，数据集分两部分，第1部分数据集下载链接：https://download.csdn.net/download/DeepLearning_/89642258 当然也可直接用该数据集训练,两个数据集合一起，训练出来的模型精度肯定要高些！ 【数据集介绍】 1、数据集图片丰富多样，背景丰富，数据多样性充足； 2、类别5类：钟表、剪刀、牙刷、遥控器、吹风机 3、算法拟合较好，yolov9-s训练准确率达到95.8% 4、标注工具，labelimg，标注精确无误、无漏标 5、数据集标签，包含voc格式和yolo格式两种，多种目标检测算法可直接用，且已划分好训练集、验证集 6、适用YOLO全系列算法、YOLOv3、YOLOv4、YOLOv5、YOLOv6、YOLOv7、YOLOv8、YOLOv9、YOLOv10、SSD、faster-rcnn、yoloX等 7、适用于毕设、课设、实训、作业、科研项目、公司实际落地项目等，欢迎下载使用！ 备注：只上传高质量数据集及科研项目资源，都经过博主验证过的，拒绝垃圾数据资源
毕业设计，基于VB+ACCESS开发的电信人事管理系统，内含完整源代码，数据库，开题报告，论文答辩，毕业论文
08-15
毕业设计，基于VB+ACCESS开发的电信人事管理系统，内含完整源代码，数据库，开题报告，论文答辩，毕业论文 本论文详细介绍了一个电信人事管理系统实例的开发于应用，是一个数据库应用系统完整的制作过程。主要内容有：系统开发背景、系统概述、需求分析、系统设计、功能、感受与体会等。其中需求分析中主要对系统的数据流程图进行了详细描绘，系统设计中主要描绘出了该电信人事管理系统的模块设计图和该系统数据库的设计。功能与操作中介绍了对该电信人事管理系统实例的基本功能。 电信人数管理系统结合电信部门中实际的人事、财务制度，经过实际的需求进行分析，采用功能强大的Visual Basic 6.0做为开发工具，并运用Access 2000作为后台数据库，而开发出来的单机人事管理信息系统。 电信人数管理系统从符合操作简便、界面友好、灵活、实用、安全的要求出发，完成人事、考勤、工资、培训、用户等的全过程管理，包括新进员工加入时人事档案的建立、老员工的转出、在职员工职位的变动等引起职工信息的修改、员工信息查询、统计等人事管理工作以及员工考勤管理，还包括员工工资查询、修改、计发、工资表打印等工资管理工作和员工培训信
编写一个使用Python的聚类算法.docx
最新发布
08-15
聚类算法是一类无监督学习方法，用于将数据集中的对象分成多个组或簇，使得同一个簇内的对象彼此相似，而不同簇的对象差异较大。除了KMeans之外，还有许多其他类型的聚类算法，每种算法都有其特点和适用场景。 以下是一些常见的聚类算法及其简要介绍： KMeans： 基于距离的聚类算法。 需要指定聚类的数量。 适用于球形簇和大致相同大小和密度的簇。 层次聚类（Hierarchical Clustering）： 可以是凝聚型（从每个点作为一个簇开始，逐步合并）或分裂型（从所有点为一个簇开始，逐步分割）。 结果通常以树状图（dendrogram）的形式表示。 不需要预先指定聚类数量。 DBSCAN（Density-Based Spatial Clustering of Applications with Noise）： 基于密度的聚类算法。 可以发现任意形状的簇。 能够识别噪声点。 需要设置两个参数：邻域半径（eps）和最小点数（min_samples）。 Mean Shift： 基于密度峰值的聚类算法。 不需要提前指定聚类数量。 使用窗口移动的方式来确定密度峰值作为聚类中心。 Spectral
计算机导论.pdf 请看
08-15
本书是计算机科学概论课程的经典教材，全书对计算机科学做了百科全书式的精彩阐述，充分展现了计算机科学的历史背景、发展历程和新的技术趋势。本书首先介绍的是信息编码及计算机体系结构的基本原理(第1章和第2章)，进而讲述操作系统(第3 竟)和组网及因特网(第 4)，接着探讨了算法、群序设计语言及软件工程(第 5 章至第 7章)，然后讨论数据抽象和数据库 (第 8章和第9)方面的问题第 10 章通过图形学讲述计算机技术的一些主要应用，第 11 章涉及人工智能，第 12 章通过对计算理论的个绍来结束全书。本书在内容编排上由具体到抽象逐步推进，很适合教学安排，每一个主题自然而然地引导出下一个主题。此外，书中还包含大量的图、表和实例，有助于读者对知识的了解与把握。本书适合作为高等院校计算机以及相关专业本科生的教材。
css清除浮动内联样式
06-22
在 CSS 中，清除浮动（clearing floats）通常用于处理由内联元素或浮动元素产生的布局问题。浮动元素会脱离文档流，影响到其他元素的排列。以下是一些清除浮动的方法： 1. **`clear` 属性**：直接在需要清除浮动的元素上使用 `clear` 属性，可以设置为 `clear: both;` 来清除上下浮动，`clear: left;` 或 `clear: right;` 只清除一侧。 ```css .clear-both { clear: both; } ``` 2. **`::after`伪元素**：利用伪元素 `::after` 在元素之后添加内容，并设置 `clear: both` 或 `float: none`。 ```css .clear-after { content: ""; display: table; /* 或者 block */ clear: both; } ``` 3. **父容器的 clearfix** 技巧：这是一种常见的清除浮动技巧，通过设置父元素的 `overflow` 和 `display`，让父容器也参与布局并包含浮动子元素。 ```css .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .has-floats { overflow: auto; /* 或者 hidden */ zoom: 1; /* 对 IE6/7 进行兼容 */ } ``` 4. **Flexbox 或 Grid 布局**：当使用现代布局模型时，可以通过设置 `display: flex` 或 `display: grid` 来自动处理浮动，因为这些布局模式会自动处理浮动元素。 ```css .flex-container { display: flex; flex-wrap: wrap; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值