float闭合(清除浮动)和CSS HACK

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

时间: 2024-10-11 22:11:19

float闭合(清除浮动)和CSS HACK的相关文章

CSS float 与 清除浮动

CSS浮动规则: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 浮动1: 设置float : right,元素脱离文档流并向上向右移动,直到它的右边缘碰到包含块的右边缘. 浮动2: 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘. 因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失. 浮动3: 如果把所有三个框都向

CSS定位机制:浮动 float及清除浮动的常用方法

CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ul ol li dl dt d 行内元素的特征: 与其他元素同行显示 不可以设置宽和高 宽和高就是文字或图片的宽高 常见的行内元素:span a b i u em 2.浮动 浮动基础 会使元素向左或向右移动,只能左右,不能上下 浮动元素碰到包含框或另一个浮动框,浮动停止 浮动元素之后的元素将围绕

float与清除浮动的注意事项有哪些?

先来一个常见的bug:代码:效果:描述:当我们给一个元素设置float浮动之后,其后面的元素不再按照正常的排列方式跟随在这个元素后面,而是会被float元素压在下面,并且float元素不再作为撑开父元素的子元素.那么为什么会出现这样的问题呢?可显而知是浮动元素带来的影响,那么浮动元素布局的时候为什么会出现这样的影响呢?接下来我们来探究一下浮动元素的问题一.float的本质首先我们来探究一下float的本质,float的出现其实是为了实现文字环绕的效果的,类似于如下效果:我们会发现当让图片浮动之后

【Web前端】清除浮动&amp;amp;css中文字体

清理浮动有非常多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow.使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用例如以下代码来清理浮动. /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原

清除浮动(clearfix hack)

eg:

CSS清除浮动_清除float浮动

2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式.这样即可清除浮动. 具体CSS代码: .divcss5{ width:400px;border:1px solid #F00;background:#FF0} .divcss5-left,.divcss5-right{width:180px;hei

CSS浮动与清除浮动(overflow)例子

在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠: Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are e

CSS清除浮动技巧

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色

css清除浮动的三种方式

1.父级元素结束之前加入空div,div的样式中有“clear:both” 2.父级元素设置样式"overflow:hidden".原因:“为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动.Css overflow:hidden清除浮动方法DIVCSS5推荐使用.” 3.父级元素设置class样式"clearfix"

CSS学习摘要-浮动与清除浮动

float 浮动float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性(与绝对定位相反). 一个浮动元素是float的值不为none的元素. /* Keyword values */float: left;float: right;float: none;float: inline-start;float: inline-end; /* Global values */float: inherit;float