有人已经写过了。(*^__^*) 嘻嘻……

为啥我不能写, ( ‵o′)凸

float

首先,HTML的布局是流布局。其元素是分为行内元素和块级元素的。

所谓行内元素就是接着写不会发生换行的元素如<span>,<a>等,其实可以把他们显示为块级元素的,就是大名鼎鼎的display : block;

而所谓的块级元素呢,就是会另起一行绘制的元素,并且它绘制完之后,后面的元素也必须另起一行!真TMD霸气!

唉,你跟我说这个干啥?说float啊!!!

好吧仁兄,马上就说。

float就是为了让一些块级元素显示为行内元素。

唉,费这个劲干嘛啊?

还不是那帮孙子觉得好看造成的!没有办法,拿人钱财替人消灾。

float有none,left和right三种,可能还有inherit,但是一般我也不用。

其实none我也不用哈,因为是默认的啊。

开始说怎么回事儿之前咱们理解个事儿,你说A标签使用了float之后,它会有啥效果呢?

对,答案就是它漂起来了,也就是说脱离了原来的流式布局,但是它只能往上飞(相对于他的父标签而言)

float: left

首先A标签浮起来了,所以A标签后面的元素会往上顶(除非他也飘起来了),但是A标签呢?飘起来之后往左边游,直到碰上父元素的边框或者是碰到另一个漂着的元素。

float: right

同样的道理,只不过它往右漂了。

还有一点,就是流式布局中靠前的漂起来的元素,相对于靠后的漂起来的元素更加靠近float指定的值(left|right)

clear

首先明确一点,clear的作用就是用来消除float的。天生一对冤家(貌似死CSS2在作孽哈)。

clear的影响,它跟float不太像,float除了影响自己之外还会影响后来的元素(我先飞了,你顶上去!)。

clear影响的只有自己。啥意思呢?

假如A标签使用了clear: left。那么它的意思是,老子左边不许有浮动元素!然后他跟HTML一顿急,人家不理他!擦,不管我,老子自己走。然后自己就跑到下一行去了。但是它还是很嚣张的,它会把下一行的元素挤下去。

所以呢,clear有三个备选值,left|right|both。

其含义不言而喻,好吧,不言而喻。

╭︿︿︿╮{/-●●-/} ( (oo) )  ︶︶︶ 

CCS float vs clear的更多相关文章

  1. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  2. 89组合margin、padding、float、clear问题

    有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...

  3. 转: CSS中float和clear的理解

    float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...

  4. CSS的float与clear

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  5. float、clear、overflow

    浮动: float:  none|left|right 作用使得标签失去块级标签的独占一行效果,向某个方向靠拢 标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况 ...

  6. Css中position、float和clear整理

    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...

  7. CSS float与clear & 替换元素与非替换元素

    css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...

  8. float和clear

    简介 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性. 浮动元素是float值不为none的元素. 可能 ...

  9. float 和 clear

    float 特性1:可以为行内浮动元素设置宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

随机推荐

  1. magento 去掉index.php .html

    首先应该确保你的服务器环境,达到了magento的运行需求,若你是使用的是magento专用空间就不必担心了,若不是请查看我以前的文章,检测你的运行环境(http://www.hellokeykey. ...

  2. magento启用SSL改http成https

    Magento是电子商务网站,对于网站的用户信息安全来说,让Magento使用SSL连接是一个很好的解决方案.如果在页面的边栏或者底部放上些表明本站使用安全连接的图片,显得更专业,让客户有安全感,对于 ...

  3. (进阶篇)浅谈COOKIE和SESSION关系和区别

    COOKIE介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 coo ...

  4. HDU 4597 记忆化搜索

    ² 博弈取牌—记忆化搜索 题目描述: 有两副带有数字的牌,(数字>0)两人轮流取,取中了某张牌,自己的分数就加上牌上的数字,但只能从两端取,每人都会用最优的策略使得自己的分数最高.问A先取,他能 ...

  5. __attribute__你知多少(转)

    转自:http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属 ...

  6. Python实现ORM

    ORM即把数据库中的一个数据表给映射到代码里的一个类上,表的字段对应着类的属性.将增删改查等基本操作封装为类对应的方法,从而写出更干净和更富有层次性的代码. 以查询数据为例,原始的写法要Python代 ...

  7. ASP.NET MVC 3 之表单和 HTML 辅助方法(摘抄)

    ——选自<ASP.NET MVC3 高级编程(第5章) 孙远帅 译> 第5章 表单和HTML辅助方法 本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 ...

  8. connect to tomcat with JMX

    Answering my own question; turned out to be easier than i thought. Following needs to be done, for e ...

  9. ExtJs 入门教程

    http://www.cnblogs.com/iamlilinfeng/archive/2012/12/31/2840663.html

  10. Mongo导出数据文件导致错误 Got signal: 6 (Aborted)解决方法

    一哥们要导出一个数据表的数据,结果导出一半,硬盘不够用,卡死了, 然后重启主机,导致mongo启动后进程自动死掉, 报错如下. Mon Oct 28 10:39:02.270 [initandlist ...