首页 > 代码库 > 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