深入理解float

本文中所提到到的各种方法技术,我都己尽量注明出处。转载本文,请注明出处:http://gwx.showus.net/blog/article.asp?id=163。

最近在使用float时屡屡爱挫,于是遍查典籍,特别是根据CSS的十八般技巧之十三.清除浮动的指引,对float有了更深入的了解,希望大家批评指正。

1.使用float时出现的问题

一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。

解决的方法

1.陈旧的方法--使用clear:both
通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。

计算机系统">

通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。
CSS的方法--使用:after

这种方法在在文章《How To Clear Floats Without Structural Markup》中被提到。
 程序代码/*需要用到的CSS样式表的最初设想*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/*实际用到的CSS样式表(针对不同浏览器做了优化)*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/ *
html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

2.CSS的方法--使用overflow
前面的2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《 Super simple clearing floats》中被广泛讨论。

 程序代码/*需要用到的CSS样式表的最初设想(对IE不起作用)*/
.clearfix2{overflow: auto}

/*实际用到的CSS样式表(针对不同浏览器做了优化)*/
.clearfix2{
_height:1%; /*height前面的下划线是必须的*/
overflow:auto;
}

时间: 2024-08-30 05:58:47

深入理解float的相关文章

2天驾驭DIV+CSS!第二课

大家应该明白Float的作用了吧,就是为了消除块状元素"霸权主义"的一把利器! 页面布局有两种方式 1)浮动Float 2)定位Position 今天就来一个小小的练习,让大家理解Float的含义 [例子] 要求: 1)两个方块,一个红色#900,一个蓝色#009: 2)红色方块宽度和高度均为200像素,蓝色方块 宽度为300像素,高度为200像素: 3)红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素: 页面效果如下: 源代码如下: <

彻底理解浮动float CSS浮动详解 清除浮动的方法

原文:彻底理解浮动float CSS浮动详解 清除浮动的方法  我们把网页的常用的布局格式分为以下三种:   1.标准流.  所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构       2. 浮动流  使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做.       3. 定位流   定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标

合理应用 正确理解CSS的float浮动属性

css|浮动 首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术,在HTML中的所有对象,默认分为两种:块元素(block element).内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素.关于块元素和内联元素可以参考这里. 其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式.block对象设置了fl

整理对Spark SQL的理解

Catalyst Catalyst是与Spark解耦的一个独立库,是一个impl-free的执行计划的生成和优化框架. 目前与Spark Core还是耦合的,对此user邮件组里有人对此提出疑问,见mail.   以下是Catalyst较早时候的架构图,展示的是代码结构和处理流程. Catalyst定位 其他系统如果想基于Spark做一些类sql.标准sql甚至其他查询语言的查询,需要基于Catalyst提供的解析器.执行计划树结构.逻辑执行计划的处理规则体系等类体系来实现执行计划的解析.生成.

理解Java中的引用传递和值传递

关于Java传参时是引用传递还是值传递,一直是一个讨论比较多的话题,有论坛说Java中只有值传递,也有些地方说引用传递和值传递都存在,比较容易让人迷惑.关于值传递和引用传递其实需要分情况看待,今天学习和分析一下,着急可以先看最后的结论. >>基本类型和引用类型在内存中的保存 Java中数据类型分为两大类,基本类型和对象类型.相应的,变量也有两种类型:基本类型和引用类型. 基本类型的变量保存原始值,即它代表的值就是数值本身: 而引用类型的变量保存引用值,"引用值"指向内存空间

源码-求教一个vc中float转化的问题!

问题描述 求教一个vc中float转化的问题! 50C buffer[0] = 0xc6;buffer[1] = 0xc3;buffer[2] = 0x90;buffer[3] = 0x30; 哪位大神能给了源码吗,谢谢了!!不会搞,急死了! 解决方案 请教一个VC问题 解决方案二: 数据的在计算机中不是用二进制表示的嘛,4位16进制就需要用32位二进制来表示:然后低字节存地位,高字节存高位,也就是传说中的"小端模式":这个不需要什么源码,理解到了就行:理解不到就去看书 解决方案三:

MySQL数字类型int与tinyint、float与decimal如何选择

最近在准备给开发做一个mysql数据库开发规范方面培训,一步一步来,结合在生产环境发现的数据库方面的问题,从几个常用的数据类型说起. int.tinyint与bigint 它们都是(精确)整型数据类型,但是占用字节数和表达的范围不同.首先没有这个表就说不过去了: Type Storage Minimum Value Maximum Value (Bytes) (Signed/Unsigned) (Signed/Unsigned) TINYINT 1 -128 127 0 255 SMALLINT

Java double和 float丢失精度问题

由于对float或double 的使用不当,可能会出现精度丢失的问题.问题大概情况可以通过如下代码理解: public class FloatDoubleTest {   public static void main(String[] args) {   float f = 20014999;   double d = f;   double d2 = 20014999;   System.out.println("f=" + f);   System.out.println(&qu

css-CSS 浮动模型 float 的覆盖

问题描述 CSS 浮动模型 float 的覆盖 我的理解是:按照 官方的说法,第一张图片 已经设置了 左浮动,应该 与文档流分离.第一张图片分离文档流,第二张图片应该在第一图片那儿位置,并且把被第一张覆盖了: 老师 我那儿理解 错? 解决方案 需要根据下一个元素是块级元素还是内联元素而定.规则简单来说如下 当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论 块级元素(a) 块级元素(b) b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面. 块级元素(a)