登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
Gitee 2025 年度开源项目评选中
代码拉取完成，页面将自动刷新
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
3
Star
45
Fork
21
DreamCoders
/
CoderGuide
代码
Issues
1169
Pull Requests
0
Wiki
统计
流水线
服务
JavaDoc
PHPDoc
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
SBOM
我知道了，不再自动展开
更新失败，请稍后重试！
移除标识
内容风险标识
本任务被
标识为内容中包含有代码安全 Bug 、隐私泄露等敏感信息，仓库外成员不可访问
清除浮动有哪些方式？比较好的方式是哪一种？
待办的
#IAG9MG
陌生人
拥有者
创建于
2024-07-29 16:06
<p>1、使用clear属性的空元素 </p><p>在浮动元素后使用一个空元素<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。 使用这种方式清除浮动优点是简单，兼容性也好 ；缺点是不利于代码语义化，后期维护成本大。</p><p>2、使用css的overflow属性</p><p>给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发hasLayout 。为父元素设置容器宽高或设置zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。使用这种方式清除浮动优点是简单，浏览器支持好； 缺点是不能和position配合使用，因为超出的尺寸会被overflow:hidden隐藏。</p><p>3、使用CSS的:after伪元素 </p><p>结合 :after 伪元素，伪元素，表示一个元素之后最近的元素和 IEhack ，可以完美兼容当前主流浏览器。其中， IEhack 指的是触发hasLayout。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。给浮动元素的容器添加一个 clearfix 的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格“020”或点“.”，并且赋予clear属性来清除浮动。使用这种方式清除浮动的优点是 浏览器支持好，不容易出现怪问题，在大型网站中都有使用，如腾迅，网易，新浪等等）； 缺点是代码多，要两句代码结合使用，才能让主流浏览器都支持。</p><p>4、给父级元素设置高度</p><p>使用这种方式清除浮动的优点是简单， 代码少，好掌握 ；缺点是只适用于高度固定的布局。</p><p><br></p>
<p>1、使用clear属性的空元素 </p><p>在浮动元素后使用一个空元素<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。 使用这种方式清除浮动优点是简单，兼容性也好 ；缺点是不利于代码语义化，后期维护成本大。</p><p>2、使用css的overflow属性</p><p>给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发hasLayout 。为父元素设置容器宽高或设置zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。使用这种方式清除浮动优点是简单，浏览器支持好； 缺点是不能和position配合使用，因为超出的尺寸会被overflow:hidden隐藏。</p><p>3、使用CSS的:after伪元素 </p><p>结合 :after 伪元素，伪元素，表示一个元素之后最近的元素和 IEhack ，可以完美兼容当前主流浏览器。其中， IEhack 指的是触发hasLayout。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。给浮动元素的容器添加一个 clearfix 的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格“020”或点“.”，并且赋予clear属性来清除浮动。使用这种方式清除浮动的优点是 浏览器支持好，不容易出现怪问题，在大型网站中都有使用，如腾迅，网易，新浪等等）； 缺点是代码多，要两句代码结合使用，才能让主流浏览器都支持。</p><p>4、给父级元素设置高度</p><p>使用这种方式清除浮动的优点是简单， 代码少，好掌握 ；缺点是只适用于高度固定的布局。</p><p><br></p>
评论 (
0
)
登录
后才可以发表评论
状态
待办的
待办的
进行中
已完成
已关闭
负责人
未设置
标签
Html/JS/CSS
未设置
标签管理
里程碑
未关联里程碑
未关联里程碑
Pull Requests
未关联
未关联
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
未关联
未关联
master
开始日期 - 截止日期
-
置顶选项
不置顶
置顶等级：高
置顶等级：中
置顶等级：低
优先级
不指定
严重
主要
次要
不重要
参与者（1）
1
https://gitee.com/DreamCoders/CoderGuide.git
git@gitee.com:DreamCoders/CoderGuide.git
DreamCoders
CoderGuide
CoderGuide
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号，请先登录后再操作。
立即登录
没有帐号，去注册
