`
bluenemo
  • 浏览: 178812 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

用clearfix:after消除 css浮动

阅读更多

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

<div style="border:2px 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;">CSSBBS</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因为float:left之后,就丧失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

以前我都是用这样的法子 来解决:
<div style="border:2px 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,它会被强制 换一行显示。所以,我一直在寻找更好的解决措施。

解决的措施:
首先设置这样的CSS:
CSS代码:

代码:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
然后,我们再修正原本的HTML代码,让外部的容器DIV来应用这个CSS:
HTML4STRICT代码:

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

* html .clearfix {height: 1%;}

在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;
}

* html .clearfix {height: 1%;}

因为转义字符"\",Mac IE涉猎器会漠视 掉这段Hack,但Windows IE不会,它会利用 * html .clearfix {height: 1%;} 来达到 撑开DIV容器的目标(貌似Mac IE没有措施解决这个问题,不过幸好用户数量是在是太少了,Safari支撑就可以了:p)。

分享到:
评论

相关推荐

    用clearfix:after消除css浮动解决外部div不能撑开问题

    在本例中,我们将探讨如何使用`clearfix:after`来消除浮动并确保外部`div`能根据内部浮动元素自动调整高度。 浮动元素的特性是它们会脱离常规文档流,只在其内容区域内占用空间,而不影响其他非浮动元素的布局。当...

    css清除浮动clearfix:after的用法详解(附完整代码)

    .clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }  如果外部有一个div容器,其内部div容器设置了...

    .clearfix:after(清除浮动)中各个属性及值详细解说

    `.clearfix:after` 是一种常见的 CSS 技巧,用于清除浮动元素的影响,以防止父元素因浮动元素而收缩。在 CSS 中,浮动元素(如 `float: left` 或 `float: right`)会脱离正常文档流,导致父元素无法正确包裹它们。`....

    clearfix:after清除浮动的用法及测试代码

    今天回顾一下css中的清除浮动 复制代码代码如下: .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/ .clearfix{*+height:1%;}/*不...

    .clear 万能清除浮动(clearfix:after)

    使用 `clearfix:after` 的优点在于,我们可以在不修改HTML结构的情况下,只需对CSS进行调整就能实现浮动元素的清除。这在维护代码和保证代码整洁性方面非常有用。为了应用这个方法,只需要将 `.clearfix` 类添加到...

    CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

    为了解决这个问题,我们可以使用CSS的`clearfix`技术。 `clearfix`方法是一种非侵入式的清除浮动方式,它允许父元素自动扩展以包含其浮动的子元素,而无需在HTML中添加额外的元素或者使用`clear:both`属性。这里...

    overflow:hidden line-height clearfix:after使用方法介绍

    本篇文章将详细介绍三个重要的CSS属性:`overflow:hidden`、`line-height`以及`clearfix:after`,并提供它们的使用方法和实际应用场景。 1. **`overflow:hidden`**: `overflow:hidden` 是一个用于处理元素内部...

    css中3种清除浮动方法

    总结来说,CSS中的清除浮动有多种方法,包括传统的`clearfix`方法、使用`:clearfix`伪类和采用Flexbox布局。选择哪种方法取决于项目的需求,如兼容性、代码简洁性和布局复杂性等因素。理解这些方法的原理和应用场景...

    CSS 浮动.pdf

    **CSS浮动详解** 浮动(Float)是CSS布局中一种古老但仍然重要的技术,它最初设计用于创建多列布局,如杂志或报纸的版面设计。浮动元素会从当前的正常文档流中移出,向左或向右移动,直到它们的边框接触到包含它们...

    DIVCSS布局:CSS浮动float属性详解.doc

    这种差异通常需要通过清除浮动(clearing floats)来解决,比如使用`clear:both`或`clearfix`类。 清除浮动是为了防止元素因前面的浮动元素而发生意料之外的重叠或错位。当一个元素的父级元素内有浮动元素,而父级...

    CSS中使用clearfix清除浮动的方法

    总结来说,clearfix方法是一种优雅地解决浮动元素导致的父元素高度塌陷问题的CSS技巧。它通过在不增加额外HTML标记的情况下,利用CSS伪元素和`clear:both`属性来实现浮动清除。随着浏览器技术的演进,clearfix方法也...

    css兼容性.docx

    一种常见方法是使用`clearfix`类,将其应用在包含浮动元素的容器上: ```css .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } ``` 或者,使用CSS...

    50个便于使用的CSS2CSS3代码片段.pdf

    这个更新的版本使用了`:before`和`:after`伪元素来达到清除浮动的效果,同时支持了旧版的IE浏览器。 这些CSS代码片段只是冰山一角,CSS2和CSS3提供了许多其他功能,如渐变、阴影、动画、响应式设计等。例如,使用...

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

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

Global site tag (gtag.js) - Google Analytics