float闭合（清除浮动）和CSS HACK

2016-02-20 00:11 18 1 收藏

给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的float闭合（清除浮动）和CSS HACK，过去的都会过去，迎接崭新的开始，释放更美好的自己。

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）一、float 闭合（清除浮动）

　　将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

style
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}
/style

二、CSS HACK

　　以下两种方法几乎能解决现今所有HACK.
　　1, !important
　　随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

style
#wrapper
{
width: 100px!important;
width: 80px;
}
/style

　　2, IE6/IE77对FireFox
　　*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）style
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
/style

　　注意:
　　*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
　　!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　""

来源:http://www.tulaoshi.com/n/20160220/1631439.html

上一篇： word 插入图片问题
下一篇： Windows 8如何调用Tablet输入面板

看过《float闭合（清除浮动）和CSS HACK》的人还看了以下文章更多>>

CSS教程：彻底弄懂闭合浮动元素

标签： Web开发

最近两个月断断续续做了好几个网站的美工，做的过程中对DIV+Css的标准开发有了进一步的了解。有两点收获最大，一是彻底弄懂了CSS的盒子模式(Box Model)，再一个就是搞定了困扰我很久的闭合浮动元素的问题：一般说来如果某个子元素使用了浮动(float)，那父元素总是不能确切地知道子元素是在什么位置结束的，所以父元素的下边框总是...

Div+CSS教程：如何闭合浮动元素？

标签： Web开发

按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。...

闭合浮动元素让CSS代码更规范

标签： Web开发

CSS教程:闭合CSS浮动元素的几种方法

标签： Web开发

绝对定位(absolute)和浮动定位(float)

标签： Web开发

在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结...

查看更多精彩>>