html 内部浮动外部不,CSS:外部层高度自适应内部浮动层高度的方法
为了节省时间,根据个人测试在浮动层的外部层里加入overflow:auto;zoom:1; 即可适应内部浮动层的高度,似乎没有以下说的那么复杂,这样做发现问题或有更好提议的同学,欢迎留言讨论。
以下为转载文章
----------------------------------------------------------------------------------------------------------------------
先看一个例子:
HTML:
复制代码代码如下:
CSS:
复制代码代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
在各个浏览器中的效果一致:
可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul
是看不到的。当然要让它伸长也很简单,只需要在最后一个 li
后面加一个标签清除下浮动就可以了。不过这样的话就改变了HTML结构,不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul
自动伸长。
注意:自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。
第一种方法:
IE 支持一个 CSS 属性 zoom,
这个元素接受一个数字或一个百分数,表示这个元素放大(缩小)的比例。例如:zoom:0.5或zoom:50%
表示缩小一半,而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后,IE
就会自动伸长了。一般情况下我们不需要放大或缩小,所以定义 zoom:1 就行了。现在的 CSS:
复制代码代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;
}
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下:
复制代码代码如下:
ul:after {
content:".";
display:block;
clear:both;
height:0;
}
:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象成在最后一个
后面插入了一个
.里面的内容是一个”.”,然后设置display:block;
clear:both; height:0; 等属性 (这个比喻不一定准确)。
我们看下在 Firefox 下面的效果:
可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:”.”
。
这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。
好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码:
复制代码代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二种方法
我刚说过不止一种方法可以解决,那现在就来说说第二种方法。第二种方法还要更简单一些。同样,需要将浏览器分成两个阵营。不过和上一个有所不同,这一次
IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari
等(这里暂时称为A浏览器)。对于这些浏览器,只要定义一个 overflow:auto; 即可,但是对于 IE6 和 IE5
(称为B浏览器)却不起作用。不过要 IE6,IE5 听话也很简单。只要定义一个高度即可,哪怕是 0
,也会自动伸长。知道这些还没用,我们还得区分这两个阵营的浏览器才行。怎么区分呢?
A 浏览器支持属性选择符,而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
复制代码代码如下:
[xmlns] ul {
overflow:auto;
}
需要注意的是HTML 必须要有< !DOCTYPE
>头部以及有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括
Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式:
复制代码代码如下:
* html ul {
height:1%;
}
其实 height 完全可以写成 0,为什么要写1%呢?告诉你其实我也不知道,大家都这么写。
好了,第二种方法的 ul 全部样式代码如下:
复制代码代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul {
overflow:auto;
}
* html ul {
height:1%;
}
现在既然有两种方法,那么那一种更好呢?我个人比较喜欢第二种方法。原因很简单,代码更少,而且是符合标准的。只是在极少数情况下会出现滚动条,所以应该这两种方法配合使用。
还有,这些代码是可以通用的,可以提取为一个类比如 .clearfix 。这个任务就交给你自己完成吧。
html 内部浮动外部不,CSS:外部层高度自适应内部浮动层高度的方法相关推荐
- php图片如何让浮动,页面中用css属性怎么控制图片自定义浮动?(示例)
新手在设计web页面时,偶尔就图片浮动的问题会产生一些困扰,不知从何下手.本篇文章主要就给大家介绍css浮动的相关知识,希望对需要的朋友有所帮助.首先这里就需要大家了解一下css中的一个重要属性浮动f ...
- CSS 实现高度自适应铺满整屏的实现
原文地址: https://www.jb51.net/css/753376.html 正文: <style>#login{width:100%;min-height: 100vh;disp ...
- html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老 ...
- 什么是内部防火墙?它与外部防火墙有什么不同?
内部防火墙是一种安全解决方案,旨在保护网络免受已经越过边界的攻击.一般来说,防火墙是一种设备或软件,旨在监控流量并防止未经授权的访问,而内部防火墙是该概念的高级应用程序. 在比较内部防火墙与外部防火墙 ...
- 比较器Comparable(内部比较器)和Comparator(外部比较器)
比较器Comparable(内部比较器)和Comparator(外部比较器) 1.使用Comparable是从实体类中直接继承Comparable接口,并且重写compareTo方法. 2.使用Com ...
- php怎么引入外部css文件,js如何引入css外部文件
js引入css外部文件的方法:写成自定义函数,url为文件路径,供以后的元素调用,代码为[var script = document.createElement('script')].4o5少儿编程网 ...
- 计算机内部总线和外部总线,科学网-怎样将计算机内部总线扩展为外部网络?-姜咏江的博文...
怎样将计算机内部总线扩展为外部网络? 姜咏江 透明计算公示成果的第一条就是"将原来计算机的内部总线扩展为外部网络".现在我们来谈谈能不能将计算机内部总线扩展成外部网络. 1.什么是 ...
- ant不是内部命令也不是外部命令问题的解决方法
配置如下: 解压在D盘 新建变量ANT_HOME 路径为解压目录如D:/apache-ant-1.7.1 Path中添加路径为%ANT_HOME%/bin; 错误提示: 'ant' 不是内部命令也不是 ...
- NAT ALG DNS — DNS在外部,内网通过域名访问内部服务器
NAT ALG DNS-DNS在外部,内网通过域名访问内部服务器 应用场景: R2.R3.R4为企业内部,DNS部署在公网,R2上设置NAT是的R1能够telnet到R4. 如在R2上启用NAT AL ...
最新文章
- GStreamer 1.0 series序列示例
- ecs加解密_ECS云盘加密
- cad文本改宋体字型lisp_CAD的40个常用命令和20个常见问题解决方法 撩妹必备技能...
- SEO优化技巧:16个方法优化网页中的图片
- IDE日志分析方法pt。 2
- 操作符!与操作符!!的区别
- 上岸 | 震惊!211高校硕士毕业后,我在非洲当酋长!
- 海绵城市工程_打造透水“民心路”、共创海绵“生态城”|市政工程管理处持续推进城市道路“黑臭水体改造”工程...
- 利用数据绑定(DataBinding)简化多线程数据展示
- 爬虫python需要安装吗_python爬虫需要安装什么
- libx264.c:function X264_init: error: undefined reference to x264_encoder_open_142
- PS去除图片和PDF中的水印
- haar特征简单分析
- 世嘉MD游戏开发【二】:Hello World
- Windows下搭建kms激活服务器
- python版武侠小说男女侠姓名生成器
- 宽字符处理函数函数与普通函数对照表
- html水平线向上移动代码,HTML 水平线
- 安装和开启 魔改bbr
- rust program英文和汉语混合笔记(2)