再论清除浮动的空DIV方法

2016-02-20 00:30 3 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享再论清除浮动的空DIV方法，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

CSS 使用浮动会造成布局的混乱，通常清除浮动的方法是，利用一个如下样式的空 Div：

div class="clear"/div.clear{clear:both;}

更为优良的 CSS 代码是：

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

这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器。

当然，这在通过 CSS 在元素之后追加 "." 并不必要，因为还需要 visibility 来隐藏掉它。通过优化，代码如下：

.clear:after{content:"020";display:block;height:0;clear:both;}.clear{zoom:1;}

其中，020 指在容器后添加空格，这样就避免使用 visibility 隐藏可视性了。

另外，不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器，未免有些突兀。

来源:https://www.tulaoshi.com/n/20160220/1631966.html

上一篇：控制first-letter伪类的背景
下一篇：饭米粒（家人）

看过《再论清除浮动的空DIV方法》的人还看了以下文章更多>>

通过CSS实例实现清除浮动

标签： Web开发

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： HTML4STRICT代码：div style="width:200px;border:1px solid red;" div style="float:left;width:80px;height:...

清除浮动clear:both的应用详解

标签： Web开发

在CSS中我们会经常要用到清除浮动Clear，比较典型的就是 clear:both; CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的...

Div+CSS教程：如何闭合浮动元素？

标签： Web开发

按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。...

float闭合（清除浮动）和CSS HACK

标签： Web开发

一、float 闭合（清除浮动）将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. style .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:bl...

CSS制作网页经验:清除网页浮动

标签： Web开发

在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：div style=clear:both;/div。例如： div style=background:#666; div style=float:left; width:30%; height:40px;background:#EEE; Some Content/div /div 此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这...

查看更多精彩>>