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) )  ︶︶︶ 

转载于:https://www.cnblogs.com/voctrals/p/4137162.html