清除浮动的方法

1.给父级div设置heigh

  原理: 父级手动定义height,解决了父级div无法自动获取到高度的问题

   优点:简单,代码少

   缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

   不建议使用只是建议高度固定的布局时使用

2.在结尾处加空div标签clear:both

  原理:添加一个空div,利用clear:both清除浮动,让父级div能自动湖区高度

   优点:简单代码少,浏览器支持好

   缺点:很多初学者不理解原理,如果页面浮动多就要增加很多空div,让结构复杂

   不推荐使用,这是以前主流的清除浮动的方法

3.父级div定义伪类:after 和zoom

  原理:IE8以上和非IE浏览器才支持:after,原理和方法2类似,zoom(IE专有属性),可解决ie6,ie7的浮动问题

优点:浏览器支持好,不容易出怪问题

  缺点:代码多, 很多人不理解原理,要两句代码结合使用,才能让主流浏览器支持

    建议使用,建议定义公共类,增加可重复利用性

4.父级div定义overflow:hidden

原理:必须定义width或者zoom:1,同时不能定义height,使用它的时候,浏览器会自动检查浮动区域高度

优点:简单,代码少,浏览器支持好

缺点:不能和position配和使用,因为超出的尺寸会被隐藏

  只推荐没有使用position或duioverflow:hidden理解比较深的时候使用

5.父级div定义overflow:auto

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 
   优点:简单,代码少,浏览器支持好 
 缺点:内部宽高超过父级div时,会出现滚动条。 
   不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6.父级div也一起浮动

  原理:所有代码一起浮动,就变成了一个整体 
     优点:没有优点 
     缺点:会产生新的浮动问题。 
     建议:不推荐使用,只作了解。

7.结尾处加br标签clear:both

原理:父级div定义zoom:1来解决IE浮动问题,结尾处加br标签clear:both

8.替代浮动方法要浮动的元素设置display:inline-block

  优点:整体代码简洁了很多,这是他的价值所在 
  缺点:有浏览器兼容问题;只有特定的场合适用,像水平菜单条之类,布局之类,并不适合文字环绕         图片这些真正需要float的场合;元素间的纯空白会造成占位

时间: 2024-10-19 03:16:18

清除浮动的方法的相关文章

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问

IE6+以上清除浮动普遍方法总结

浮动,CSSfloat属性.学过的人应该知道这个属性,平时用的应该也是很多的.特别是在N栏布局中. 但是我们会经常遇到这样一种情况,前面的元素浮动之后会影响后面的元素,后面的元素需要用清除浮动来消灭前面元素的影响. 以前经常就是用<div style="clear:both"></div>或者<br style="clear:both" />这样的方法,甚至于有人觉得在HTML加标签很low,所以就用JS手动在DOM中插入这样的清

css清除浮动各方法与原理

说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 这就产生了一个问题:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”,这显然不符合我们的“伦理观”,所以要“抓回来”施以家法:那么如何抓呢? 提起css,提起(x)html,首先进入脑海的是楚楚动人的页面吗?不,首先应该是这楚楚动人的页面的背后的“楚楚冻人

浮动问题和清除浮动的方法

[问题] 当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离(float的影响具体可读<float深入剖析>一文).如下: <!doctype html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&

8种CSS清除浮动的方法优缺点分析

为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了. 解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 我根据自己的经验总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1.父级div定义height <style type="text/cs

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

我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流 使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流 定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标准流有影响. 浮动(float) 我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要

转载-常用的清除浮动的方法有以下三种:

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:

页面布局中常用的清除浮动的方法

我们在页面布局时,基本上都避免不了使用float,但由此也会引发一些问题,尤其是在容器高度不固定时,此时它的高度完全是由内部的元素撑开的.如果内部元素还是浮动的,那么由于内部的元素脱离了文档流,父容器就不能被撑开了.如果父容器设置的有背景或者边框的话,此时就不能正常显示了,另外,父容器下边的其他容器或内容也会跟着向上"浮", 占据上面的子容器应该占据的位置.那么,这时就需要清除浮动了. 这里总结的几种的方法主要就是针对类似于上面的问题的,但也不仅限于以上问题.主要有以下几种方法: 1.

浮动及清除浮动的方法

1.浮动float 浮动元素脱离文档流,不占据空间.浮动元素直到它的外边缘碰到包含框或另一个浮动框的边框为止. 2.元素浮动有哪些问题? 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构 3.清除浮动的方法 (1).使用空标签清除浮动 在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签,影响文档结构美观性. 1 <div style="