CSS浮动Float——基础知识及兼容性问题
来源:互联网 发布:淘宝qq群拉人 编辑:程序博客网 时间:2024/06/04 19:17
先说一下浮动的基本定义:浮动的框可以向左或向右移动,直到它的外边缘碰到父级边界或另一个浮动框的边框为止。由于浮动框不在文档流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。那么就要说一下文档流了,文档流是文档中可显示对象在排列时所占用的位置(可以认为各个元素原本默认的位置)。那我们在实际应用哪里会遇到这种问题呢。例如我们现在需要把几个块级元素放在一排,我们可以使用display:inline;但是这样我们无法改变高度,也可以使用display:inline-block;但是这样的话也存在换行符被解析,IE6、IE7不兼容的问题。现在可以使用Float来修饰,下面我们说一下不同的实现方法并对其进行说明:
要想使用Float,先来简单介绍一下
float浮动:
1、块在一排显示(使块元素在一排显示)
2、内联支持宽高(使内联元素支持设置高度)
3、默认内容撑开宽度(没有宽度自动撑开)前几个与inline-block效果相同
4、脱离文档流(浮动元素有可能会覆盖正常文档流中内容)
5、提升层级半层(浮动会挤开元素内的内容)
float:left | right | none | inherit;(左,右,没有浮动,与父类相同)
clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素(左,右,左右两边,无,继承父类)
如果两个元素一个带float一个不带,带浮动的会浮动半层,飘起来覆盖住另一个元素。但在使用过程中浮动也会带起意想不到的问题:如果父类包含一个浮动元素,浮动元素并不会撑开父类造成意想不到的问题,下面有几种解决办法:
1.加高(给父类加一个固定高度)
问题:扩展性不好(如果使高度,接下来如果内容更改,也必须同时更改父类的高)
2.父级浮动(给父类也加上浮动)
问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)
3.inline-block 清浮动方法:
问题:margin左右自动失效;
4.空标签清浮动(定义一个空div,并清除左右浮动)
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)
5.br清浮动(给浮动元素后加上br标签,并清除左右浮动)
问题:不符合工作中:结构、样式、行为,三者分离的要求。
6.after伪类 清浮动方法(现在主流方法)
.clear:after{content:'';display:block;clear:both;}.clear{zoom:1;}after伪类: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FF 不支持;
7.overflow:设置是否显示滚动条;
问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;
overflow: scroll | auto | hidden;
overflow:hidden;溢出隐藏(裁刀!)
- CSS浮动Float——基础知识及兼容性问题
- css中float浮动原理及使用方法
- css中float浮动原理及使用方法
- 精简高效CSS系列之二——浮动float
- css float浮动清除
- css:float浮动元素
- CSS-浮动篇float
- CSS float 浮动属性
- css:浮动 float属性
- css浮动(float)
- CSS浮动(float,clear)
- css float浮动
- CSS浮动(float,clear)
- CSS清楚浮动float
- CSS float 浮动属性
- css:float浮动
- CSS Float(浮动)
- CSS-Float(浮动)
- Java并发编程(一) Java内存模型
- 学习java io流
- 给 DevOps 初学者的入门指南
- linux平台用VFS驱动实现目录重定向(文件驱动实现目录重定向 四)
- jz2440裸机,文件系统
- CSS浮动Float——基础知识及兼容性问题
- 旋转数组的最小数字
- 第一个目标,第一个博客,心态最重要
- oracle直方图
- 200 git windows大小写不敏感导致的autoload失败
- 本机路由表
- 使用gawk记录一段时间内,某个进程占用内存和CPU的情况
- 信息增益,信息增益率,Gini
- 整数倒序