首页 > 代码库 > CCS float vs clear

CCS float vs clear

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

为啥我不能写, ( ‵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