• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >div/css > DIV 再论清除浮动的空方法

DIV 再论清除浮动的空方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含div清除浮动,div清除浮动代码,div向右浮动,div向左浮动,div浮动等相关知识,佚名 希望在学习及工作中可以帮助到您

CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div:

<div class="clear"></div>
.clear{clear:both;}

更为优良的 CSS 代码是:

.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;}

这个方法目前已经广泛使用,淘宝、口碑,都是这种用法。通过 after 伪类 :after 和 针对 IE6 的独立 CSS Hack 来实现,完全兼容主流浏览器。

当然,这在通过 CSS 在元素之后追加 "." 并不必要,因为还需要 visibility 来隐藏掉它。通过优化,代码如下:

.clear:after{content:"020";display:block;height:0;clear:both;}
.clear{zoom:1;}

其中,020 指在容器后添加空格,这样就避免使用 visibility 隐藏可视性了。

另外,不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器,未免有些突兀。

</div>

您可能想查找下面的文章:

  • DIV设置浮动后无法撑开外部DIV的解决办法
  • DIV 再论清除浮动的空方法

相关文章

  • 2017-06-02网页上中下三分布局即上下固定中间自适应
  • 2017-08-19怎样用最简单的html+css代码制作一颗跳动的心?
  • 2017-06-02css教程:网页中Span和Div的区别
  • 2017-06-02让DIV水平垂直居中的两种完美方法推荐
  • 2017-06-02div css网页适应不同分辨率技巧
  • 2017-06-02DIV CSS制作的个性水平导航菜单实例
  • 2017-06-02纯CSS实现Tab切换标签效果代码
  • 2017-06-02使用绝对定位+负外边距让DIV层水平垂直居中页面
  • 2017-06-02CSS实现自动变为大写的自适应漂亮菜单效果
  • 2017-06-02关于CSS Hack与float闭合的CSS技巧 清除浮动代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • div css制作网页实战笔记心得
    • 5个DIV并排在一行的一种方法
    • CSS实现自动变为大写的自适应漂亮菜单效果
    • 从搭建一个React项目,同时使用git把项目放到GitHub上
    • 如何处理小图标与文字混排的多种解决方案
    • div+css纵向导航如何实现且为导航添加超链接
    • 学习DIV+CSS难不难 需要掌握哪些知识
    • div 的边框显示不同效果示例代码
    • 常见CSS与HTML使用误区详解
    • DIV+CSS实现带三角箭头的提示框

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有