关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯。
目前常用的方法大致有三种。
(1)使用空标签清除浮动
这是目前最常用的一种清除浮动的方法。空标签可以是div标签,也可以是P标签。其实理论上可以是任何标签。这种方法是在需要清除浮动的父级元素内部的最后添加一个清除浮动的空标签,其CSS代码:clear:both。此方法简洁明了,方便实用,但其弊端也很明显,就是增加了无意义的结构元素。此外,有一种与此相似的方法,<br clear="all"/>也可以实现同样的效果。
(2)使用after伪对象清除浮动
各浏览器均支持after伪对象,所以after应该是适用的,不存在兼容问题。其CSS代码:#layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}。使用中需注意:1、该方法中必须为需要清除浮动元素的伪对象设置height:0,否则该元素会比实际高出若干像素;2、content属性是必须的,但其值可以为空。此方法实用有效,且不用添加无意义的标签,但CSS代码较复杂,不够简洁明了。
(3)使用overflow属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto;其目的是让高度自适应,zoom:1;是为了兼容IE6(zoom不符合W3C标准),也可以用height:1%;的方式来解决。
这三种清除浮动的方法在实际应用中均实用有效,至于使用哪一种那就是仁者见仁智者见智了,本人还是习惯使用第一种方法,简单快捷无压力,而且那几个清除浮动的标签其实也无伤大雅!
关于CSS中清除浮动的方法的更多相关文章
- CSS中清除浮动的方法
CSS浮动,最早是为了达到文字环绕的效果提出的,也可以用来做布局,但是布局会产生很多问题(高度塌陷,漂浮在普通流上),会使当前标签产生上浮的效果,会影响前后标签,同样的代码在不同的浏览器的兼容性也不一 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
- CSS中 清除浮动解决“包含问题”
今天看到大神对浮动定位作了个详细的分析 刚好就分析了当时任务三遇到的问题 在一个div中定义了三个div,让横向排列,结果父元素div的背景色显示不出来了 ,这是个经典问题----包含浮动 < ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- 【Web】网页清除浮动的方法
网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...
- css 中的浮动
css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
- css中使用浮动的情况和清除浮动的方法
1.使用浮动时出现的情况: (1)使块元素在一行显示 (2)使内嵌元素支持宽高 (3)不设置宽高的时候宽度由内容撑开 (4)换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动) (5)元素添 ...
随机推荐
- random、面向对象编程
一.random模块:随机数 import random print random.random() print random.randint(,) print random.randrange(,) ...
- javascript generate a guid
function Guid() { var random = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); retu ...
- 在Linux下使用RAID--使用mdadm工具创建软件Raid 0(1)
在Linux下使用RAID--使用mdadm工具创建软件Raid 0(1) RAID即廉价磁盘冗余阵列,其高可用性和可靠性适用于大规模环境中,相比正常使用,数据更需要被保护.RAID是一些磁盘的集合, ...
- Maven3路程(三)用Maven创建第一个web项目(1)
一.创建项目 1.Eclipse中用Maven创建项目 上图中Next 2.继续Next 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建 ...
- DIOCP之注册编码解码器与ClientContext
FTcpServer.registerCoderClass(TIOCPStreamDecoder, TIOCPStreamEncoder);//注册编码器与解码器 FTcpServer.registe ...
- js读取解析JSON数据
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
- (八) 一起学 Unix 环境高级编程 (APUE) 之 信号
. . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...
- 《Java程序设计》实验5
20145318 <Java程序设计>实验5 实验内容 运行下载的TCP代码,结对进行,一人服务器,一人客户端: 利用加解密代码包,编译运行代码,一人加密,一人解密: 集成代码,一人加密后 ...
- php 消息实时推送(反ajax推送)
入口文件index.html <!DOCTYPE HTML> <html> <head> <title>反ajax推送</title> &l ...
- centos 下 Qt Creator 的安装使用
centos 下 Qt Creator 的安装使用 Qt 以其开源,免费,完全面向对象(很容易扩展),允许真正的组件编程以及可移植跨平台等诸多优势得到越来越多的开发人员的青睐.Qt Creator 是 ...