关于DIVCSS浮动float的兼容

最近在做一个网页的div+css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先:

  一、并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上。我通常把清除浮动写成单独的<div class=”clear”></div>放在所有浮动div的最下方。

  二、在上述1情况中需要设置子div的宽度,假如不设置的话子div的宽度会被默认为母div的100%,这样float根本就产生不了效果。当然还可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效(要把子div撑大只能考里面的元素)。

  三、ie中母div被设置成特定高度之后,假如里面的子div高度(有float的话就以清除float的div的最底为总高度)超过了母div设置的高度,ie会自动把母div撑大,但是ff却不能,ff中母div的高度会依然,里面的子层会溢出到外面来。兼容方法:不要设置母层高度。
 

时间: 2024-11-02 07:00:57

关于DIVCSS浮动float的兼容的相关文章

CSS浮动(float,clear)通俗讲解

  很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.

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

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

CSS布局之-浮动(Float)与定位(Position)-让盒子飞!

一. 前言:浮动和定位的原理一定要深刻掌握!(其实每个原理都要深刻掌握!)如果你只是知道有float与position这些属性和他们的值,但是不清楚他们的值到底是怎么回事,那么你在写CSS的时候将会非常的苦恼,由刚开始的热血沸腾的想让盒子飞变成了让自己飞!因为盒子已经不知道飞到哪里去了,时间长了之后就可能会到九宵云外,盒子也找不回来了,您也可能崩溃了--二. 浮动(Float)问题:我们先来说说浮动问题,浮动是为了定位(这里的定位不是position).1. 浮动对邻居有何影响?我们先来做一下准

CSS中 浮动float 高度自适应

先来看一个示例效果的对比: 这是清除浮动之前的效果.可以明显看到column1,column2,column3这三个浮动元素的父级元素的高度并没有被撑开. 这就是我们所要达到的效果,可通过下面的三种方法来实现. 方法一: 在浮动层最后一个浮动元素的后面多加一个元素来清除浮动即可,这是最简单也是最直接的方法.唯一的缺点就是在一定程度上改变了文档流结构. html代码:    代码如下 复制代码 <div id="demo"> <div id="c1"

Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)_jquery

复制代码 代码如下: setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);// JavaScript Document$(function(){    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("h

FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome

在建设网站的时候经常会遇到 ,Div层被flash挡住或者DIV层被视频文件挡住的情况 在使用z-index无效果,终于搜到一种很简洁的答案,先记录下来方便碰到同样问题下次解决. Flash的解决方法,代码如下: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.

css实现固定元素在网页右下角浮动层效果(兼容ie、chrome、Firefox)

但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理.解决的方案是使用postion:absolute属性,它的作用大家都很熟悉,相对于父元素进行绝对定位,然后我们可以通过expression来改变#ads的top值. PS expression的定义:IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一

float是什么?浮动在CSS中的作用

文章简介:float深入剖析. float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的"最左边"或"最右边".下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). float造成的影响 对其父元素的影响

css float清除浮动实现代码

定义和用法 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 默认值: none 继承性: no 版本: css1 网页特效 语法: object.style.cssfloat="left" 实例 把图像向右浮动: img { float:right; } tiy 浏览器支持 所有主流浏览器都支持 float 属性. 注释:任何的版本的 intern