CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动。但仅仅是如此吗?
No!
要注意以下几点:
1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。
2、 浮动元素后边的非浮动元素显示问题。
3、 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。
4、子元素全为浮动元素的元素高度自适应问题。
以下详细分析四个问题。
一、浮动元素自动变块级元素
首先说说块级元素和行内元素区别,简单的来说,块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一行,设置宽高行距等不会起效。常见的块级元素有:h1~h6、p、div、ul、table,常见的行内元素有:span、a、input、select等。
示例代码:
效果如下:
二、浮动元素后的非浮动元素问题
浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时,行内元素边框、背景和内容都在该浮动元素“之上”显示,若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时,该块级元素边框和背景在该浮动元素“之下”显示,只有内容在浮动元素不在浮动元素“之下”显示。
示例代码如下:
效果图如下:
从图中可以看出来,跟在浮动div后边的div背景以及边框被压在了底下,内容却没有,span整体都在浮动div之上显示。
不过在ie6这个效果却很怪异,如图:
浮动元素没有压在非浮动div之上,反而把span压住了。
三、多个并列同方向浮动元素高度不一致问题
多个同方向浮动元素若是高度不一致的话,很可能会得到意外的效果,跟你想要的布局差别很大。多个同方向浮动元素一般是按照流式布局,一行满了则自动换行,也就是类似于以下效果:
但各个浮动元素高度不一致的话效果很可能出现下边的情况:
很意外吧,主要排列到元素7的时候,一行已经显示不下了,所以要换行,但此处换行并不是从行头开始,而是从元素5那开始,因为元素5比元素6高很多导致。
四、子元素全为浮动元素高度自适应问题
由于元素浮动后脱离了文档流,所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种,第一种就是在所有浮动元素后加:
<div style="clear:both;height:0px;"></div>
第二种办法,使用万能clear:
然后在你需要自适应的元素上加上class=” clearfix”即可。详细请参考:
你真的理解clear:both吗
在开发中,从美工MM给你Html代码中,肯定能经常看”<div style="clear:both;"></div>”这样的代码,但是你真的能明白它是做什么用的吗?
如:
你可以将此部分代码放到一个HTML页面看看效果,然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道这句话的作用了。
如图:
(1)有clear:both的:
(2)无clear:both的
这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。
但这种办法就是最好了的吗?
我这么说,当然答案就不是了。可以采用通过Hack实现:
看完解决办法,咱们来看里边的原理:
(1)、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。
:after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:
a:after{content:"(link)";}
这个CSS将会让a标签内的文本后边加上link文本文字。
(2)、利用“* html”这个只有IE6认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE6。
(3)、利用“*:first-child + html”这个只有IE7认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE7。
自:http://www.jb51.net/css/33740.html
相关推荐
本文将详细探讨`float2ascii`和`ascii2float`的概念以及实现方法。 标题中的"float2ascii"指的是将浮点数转换成ASCII码的过程。在C语言中,这通常是通过标准库函数`printf`和`snprintf`来实现的,它们可以将浮点数...
下面我们将详细介绍如何实现4字节到float的转换以及float到4字节的转换。 首先,我们来看4字节到float的转换。在C语言中,可以使用`union`类型来完成这个任务。`union`允许我们共享同一块内存空间的不同数据类型。...
在现代计算机科学领域中,浮点数(float类型)是一种常用于表示实数的数据类型,特别适用于处理那些包含小数部分的数值。由于在内存中浮点数是以二进制的形式存储,人们在阅读和理解时往往会觉得不如十进制或十六...
LitJsonExt是一个针对 LitJson 库的扩展,主要目的是解决原生 LitJson 在处理 `float` 数据类型时可能存在的不支持或兼容性问题。LitJson 是一个轻量级的 JSON 库,它被广泛用于 C# 开发中,因为其性能高效、易于...
在计算机科学中,数据通常以不同的格式存储,其中16进制和浮点数(float)是两种常见的表示方式。16进制是一种基数为16的数字系统,常用于表示二进制数据,而浮点数则用于表示带有小数部分的数值,尤其在科学计算和...
特别是当涉及到需要传输浮点数(float类型变量)时,会遇到一些需要注意的细节。 首先,需要了解float类型变量的特点。在大多数现代计算机系统中,float类型占用4个字节的存储空间,遵循IEEE 754标准,该标准定义了...
在计算机科学中,数据通常以二进制形式存储,其中浮点数(如float和double)是用于表示小数的常见类型。浮点数在内存中的表示方式遵循特定的标准,如IEEE 754。当你从一个4字节的数据块(通常代表一个32位整数)转换...
C语言中int到float的强制类型转换 在C语言中,强制类型转换是非常常见的操作之一,而int到float的强制类型转换则是其中一种非常重要的类型转换。在项目中经常会遇到需要将int类型的数据转换为float类型的情况,这...
标题中的"字节和float转换小工具"是一个专门针对字节与浮点数(float)之间转换的实用程序。这个小工具设计的目标是帮助开发者高效地在字节序列和浮点数之间进行切换,这在数据传输、存储或解析二进制文件时非常有用...
LitJson修改版是针对原版LitJson库进行的优化,主要目的是为了在Unity3D环境中更好地支持`float`数据类型的序列化与反序列化。原版LitJson库是一款轻量级的JSON(JavaScript Object Notation)解析器和生成器,主要...
`float2hex`转换工具是一个实用程序,用于在单精度浮点数(float)和双精度浮点数(double)与16进制之间进行转换,同时也支持10进制32位整数(包括无符号数和负数)与16进制的相互转换。 1. **浮点数和16进制** ...
memcpy(&float_bits, &original_float, sizeof(float)); // 这里处理字节序列,如交换字节 ``` 然后根据目标系统的字节序,对`float_bits`的字节进行调整。在小端系统上,字节是从低位到高位存储,而在大端系统上则...
特别是在处理二进制数据或者进行低级编程时,了解如何将十六进制(HEX)转换为浮点数(float)或双精度浮点数(double)至关重要。这个"HEX-Float转换工具"就是这样一个实用程序,它帮助用户方便快捷地完成这种转换...
《float2hex:深入理解浮点数到十六进制的转换》 在计算机科学中,浮点数是一种用于表示实数的数据类型,广泛应用于各种计算和数据存储。然而,计算机内部处理浮点数的方式并不直观,通常是二进制格式,如IEEE 754...
本工具“float转byte数组测试小工具”专注于将浮点数(float)转换为字节数组,这是一种在计算机内存中表示和传输数值的常用方式。在Java、C++、C#等编程语言中,这种转换尤其重要,因为它们使用不同的数据结构来...
在MATLAB编程环境中,处理浮点数(如C语言中的`float`类型)的十六进制到十进制的转换是一项基本任务。以下是对这个主题的详细解释。 首先,让我们理解`float`类型的含义。在C语言中,`float`是一种32位的浮点数据...
标题中的“Hex to Float converter”指的是一个工具,它能够将16进制(Hex)表示的数值转换成浮点数(Float)。这个工具对于理解计算机内部如何存储和处理浮点数,尤其是涉及到32位数据格式时,具有很大的帮助。 在...
在Python编程语言中,将浮点数(float)转换为二进制表示是常见的操作,尤其是在处理数值计算、数据存储或通信协议时。标题“float2bin_float_pythonfloat2bin_源码”提示我们这里涉及的是一个使用Python编写的程序...
标题中的“十六进制转float小工具,双击运行”表明这是一个实用程序,主要用于将十六进制数值转换为浮点数(float)。在计算机科学中,十六进制是一种常用的二进制表示法,而浮点数是用于表示带有小数部分的数字的...
本文将详细探讨`float`类型在内存中的数值转换工具及其相关知识点。 `float`类型是计算机科学中广泛使用的浮点数数据类型,它在不同的操作系统(OS)上可能会有不同的存储方式。在内存中,`float`通常按照IEEE 754...