clear both 的用法

在开发中，从美工MM给你Html代码中，肯定能经常看”<div style="clear:both;"></div>”这样的代码，但是你真的能明白它是做什么用的吗？

如：

</div>

你可以将此部分代码放到一个HTML页面看看效果，然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道这句话的作用了。

这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

但这种办法就是最好了的吗？

我这么说，当然答案就不是了。可以采用通过Hack实现：

<style>

.clearfix:after{

visibility: hidden;

display: block;

font-size: 0;

content: ".";

clear: both;

height: 0;

}

* html .clearfix{zoom: 1;}

*:first-child + html .clearfix{zoom: 1;}

</style>

TEST DIV</div>

</div>

看完解决办法，咱们来看里边的原理：

（1）、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。

:after伪类IE不支持，它用来和content属性一起使用设置在对象后的内容，例如：

a:after{content:"(link)";}

这个CSS将会让a标签内的文本后边加上link文本文字。

（2）、利用“* html”这个只有IE6认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE6。

（3）、利用“*:first-child + html”这个只有IE7认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE7。

clear both 的用法相关推荐

clear:both的用法
这个清除浮动用法,举个例 <div style="background-color: green;"> <div style="float:left; ...
cin.clear()及相关用法
1. cin.clear() 是用来更改cin的状态标示符的. cin.sync()是用来清除缓存区的数据流的. 如果标示符没有改变那么即使清除了数据流也无法输入.所以两个要联合起来使用. 我们定义要 ...
Matlab中clear函数的用法
目录语法说明示例清除单个变量按名称清除特定的变量清除变量集清除所有编译的脚本.函数或 MEX 函数提示 clear函数是从工作区中删除项目.释放系统内存语法 clearclear n ...
map clear java_Java Map clear()用法及代码示例
Java中的java.util.Map.clear()方法用于清除和删除指定Map集合中的所有元素或映射. 用法: void clear() 参数:该方法不接受任何参数. 返回值:该方法不返回任何值. ...
python清空字典保留变量_python彻底清除字典数据，clear方法使用
简介 INTRODUCTION知识要点:掌握clear方法的用法来彻底清空字典掌握只清除某个字典变量的方法掌握普通赋值和clear方法区别微信公众号:编程创造城市一.内容概述: 字典是由键值对 ...
python基础和第三方库笔记（python基础完结包括高级用法，第三方库持续更新中...）
python基础注:本笔记面向有一定基础的人本笔记是本人快速复习python过程中记录的,不适合零基础的人学习python的主工具,可以作为辅工具,本笔记记录了入门阶段常用操作,如有错误的地方,希 ...
C++ vector用法详解
vector是STL的动态数组,可以在运行中根据需要改变数组的大小. 因为它以数组的形式储存,所以它的内存空间是连续的. vector的头文件为#include<vector> 常用方法: ...
html clear属性值,CSS clear both清除浮动
DIV+CSS clear both清除产生浮动我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...
webgl入门(2)-初识webgl和着色器
前言原书中第2章非常长,如果整理成一个文档的话,得看好多天.为了浏览方便,我将其拆分成若干小节,方便大家学习. webgl采用HTML5中引入的canvas元素来定义页面的绘图区域.如果没有WegG ...

clear both 的用法

clear both 的用法相关推荐

最新文章

热门文章