`
jojo_java
  • 浏览: 96525 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

关于清除浮动的问题

    博客分类:
  • UI
阅读更多

在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

HTML4STRICT代码:

<div style="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div> 

 


显示的结果如下:
 
容器DIV没有被撑开

大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

以前我都是用这样的方法来解决:
HTML4STRICT代码:

<div style="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div> 

 


显示的结果如下:
 
显示正常了

我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:

<div style="clear:both"></div>

这样,其实就在最后增加了clear的动作。

但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

昨天在无数次的询问了Google大仙后,我终于找到了How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。

首先设置这样的CSS:
CSS代码:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
} 

 
然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:
HTML4STRICT代码:

<div style="width:200px;border:1px solid red;" class="clearfix">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div> 

 
在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

但是,在文章中说,Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */ 

 


因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。
测试一下,果然大功告成。
 

 

分享到:
评论
1 楼 jojo_java 2009-06-07  
How To Clear Floats Without Structural Markup
http://www.positioniseverything.net/easyclearing.html

相关推荐

    HTML5 清除浮动

    只需将父元素设置为flex容器,并使用`flex-wrap: wrap`允许换行,浮动问题即可解决: ```css .parent { display: flex; flex-wrap: wrap; } ``` 4. 使用CSS Grid:CSS Grid布局是另一种现代布局方法,它提供...

    css中3种清除浮动方法

    为了解决这个问题,CSS提供了多种清除浮动的方法。本文将详细讲解三种清除浮动的方法。 1. **传统方式:添加额外的 clearing div** 在浮动元素之后,可以添加一个额外的`&lt;div&gt;`并为其设置样式`clear: both;`。这...

    清除浮动.pdf

    解决这个问题,通常需要采用一些技术来“清除浮动”。 1. **清除浮动(Clearing Floats)**: - 最传统的方法是在父容器内部添加一个额外的标签,如`&lt;div class="clear"&gt;&lt;/div&gt;`,并设置`clear: both;`。这种方法...

    清除浮动的几种方法PPT学习教案.pptx

    原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题。优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)。缺点:代码...

    浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么

    我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除...

    CSS技术:清除浮动的最优方法.pdf

    因此,需要使用清除浮动的技术来解决这一问题。本文档将探讨清除浮动的多种方法,并分析其优缺点,以找出所谓的“最优方法”。 首先,浮动(float)属性是CSS中用于布局的主要属性之一。当元素设置为浮动状态时,它...

    css清除浮动的方法有哪些?.docx

    CSS清除浮动是为了应对浮动元素对周围元素布局的影响,特别是防止父元素因子元素浮动而高度塌陷的问题。在Web开发中,有多种方法可以清除浮动,以下将详细介绍四种常见的清除浮动的方法。 一、使用带有`clear`属性...

    清除浮动.docx

    为了解决这个问题,有多种清除浮动的方法。 1. **传统方法:额外元素清除** 这是最原始的方法,即在父容器内添加一个额外的元素,通常使用`&lt;div class="clear"&gt;&lt;/div&gt;`,并为其设置样式`clear:both`。这样,这个...

    xhtml+css清除浮动的3种方法

    为了解决这个问题,我们需要掌握几种常见的清除浮动的方法。 #### 方法一:使用额外的标签进行清除 这种方法是最直观的一种方式,它通过在浮动元素后面添加一个额外的空标签(通常是`&lt;div&gt;`),并设置`clear:both`...

    Float浮动与清除浮动

    为了解决这个问题,引入了清除浮动(Clear Float)的概念。 清除浮动主要有以下几种方法: 1. 给父元素设置固定高度:这种方法简单直接,但适用于高度固定的布局,对于高度自适应的页面则不适用。 2. 使用`overflow...

    CSS清除浮动_2种方法源代码.zip

    本文将详细讲解两种常见的CSS清除浮动的方法,并通过提供的源代码进行实例解析。 ### 方法一:clearfix类 `clearfix` 类是最常用的清除浮动方法之一,它并不需要添加额外的HTML元素,而是利用CSS伪类来解决。这种...

    CSS:清除浮动的最优方法

    为了解决这个问题,开发者们通常会使用各种方法来“清除浮动”,以确保父元素能正确包裹内容。本文将重点探讨一种高效且兼容性良好的清除浮动的方法,即利用CSS中的`overflow`属性。 传统的清除浮动方法包括使用`...

    css 完美清除浮动的两种解决方案

    为了解决这个问题,我们通常需要“清除浮动”。本文将介绍两种常见的清除浮动的方法:使用`clear:both`和使用伪元素。 1. **使用`clear:both`** 在HTML中,我们可以创建一个空的`div`元素,并为其添加`clear:both`...

    CSS的clear属性清除浮动的基本用法示例

    清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响,确保非浮动元素或后续元素能够正确地在页面上定位,避免内容溢出容器。这通常是为了恢复父容器的正常高度计算,使其能完全包裹住内部的浮动元素。 **使用`...

    CSS3 清除浮动的方法示例

    然而,这种行为也会导致一些问题,例如父元素无法正确地包含浮动的子元素,这就引出了清除浮动的需求。 2. **浮动在实际开发中的应用** 由于浮动可以使元素并排显示,因此常用于创建水平导航菜单、多列布局等。...

    H5 溢出隐藏和缩略图和清除浮动

    总结来说,H5的“溢出隐藏”、“缩略图”和“清除浮动”是网页布局和设计中不可或缺的技术,它们分别帮助我们管理元素超出容器的显示、优化图像展示和修复因浮动元素引起的布局问题。熟练掌握这些技巧,能够使我们的...

    浅谈css中浮动和清除浮动带来的影响

    为了解决这些问题,CSS提供了多种清除浮动的方法: 1. **隔墙法**(clearfix):在需要清除浮动的元素前添加一个无内容的空元素,如`&lt;div class="clearfix"&gt;&lt;/div&gt;`,并为`.clearfix`类设置样式`clear: both;`。...

Global site tag (gtag.js) - Google Analytics