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

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

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

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问https://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特有标签.

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"　""

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

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

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

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

标签： Web开发

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

CSS实例教程:浮动(float)页面布局

标签： Web开发

前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图这样HTML就很容易写出来了 div id="Logo"/div div id="Nav"/div div i...

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

标签： Web开发

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

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

标签： Web开发

通过CSS实例实现清除浮动

标签： Web开发

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： HTML4STRICT代码：div style="width:200px;border:1px solid red;" div style="float:left;width:80px;height:...

查看更多精彩>>