css clear 样式怎么写

clear，清除浮动的话可以用：
1 clear:both;
2 clearfix:after{ content:""; display:block; visibility:hidden; height:0; clear:both;}
clearfix{ zoom:1;}

css中clear的作用是清除元素的浮动效果。left 在左侧不允许浮动元素。right 在右侧不允许浮动元素。both 在左右两侧均不允许浮动元素（这时该元素会独占一行了）。
注：对第一个元素设置clear，对其后面元素不起作用。

这个clear是相对float来作用的，一起说一下：
-------------------------------------------------------------
Float：定义元素的浮动方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。相对应的CSS属性是”float”。
Clear：不允许元素的浮动。left表示不允许左边有浮动对象、right表示不允许右边有浮动对象、none表示允许两边都可以有浮动对象、both不允许有浮动对象。

clear:both;
CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

例子：

<p style="float:left;width :100px;">这个是第1列，</p>
<p style="float:left;width :400px;">这个是第2列，</p>
<p >这个是列的下面。</p>

如果不用清除浮动，那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个这利加一个清除浮动。
<p style="float:left;width :100px;">这个是第1列，</p>
<p style="float:left;width :400px;">这个是第2列，</p>
<p clear:both;>这个是列的下面。</p>

1、所有元素（包括内联元素）浮动后都会自动变为块元素；
2、还是以你说的盆上浮木块的例子来说明：浮在水面上的三个木块互相之间肯定会有碰撞的不是吗？而沉在水底的铁块（即正常的文档流）则不会受木块的影响的。浮动，并不等于说就不存在了，只不过是飘在空中而已。就好比飞机飞在空中，对地面的交通不会造成影响，但如果没有空中管制，飞机互相之间也会碰撞的啊。你可以在普通的文档流上面想象存在另一个平行的文档流，而浮动的元素就在这个文档流中，这样你就好理解了。
3、清除浮动的最大作用，就是让文档流给浮动元素留出足够的空间，也就是说浮动元素在“空中”占用多大的空间，“地面上”就给它划出多大的预留空间，而后面的其他非浮动元素就在这个保留空间的后面继续排列，这样就不会被浮动元素挡住了（但是在清除浮动之前的非浮动元素仍然会被挡住的）。由于浮动元素会脱离文档流，因此难免会对后面的所有元素造成连锁反应（大家都往前移动了），所以有时候清除浮动是非常必要的。
补充说一下：浮动元素并非是完全脱离文档流，它与文档流之间仍然存在千丝万缕联系的。只有绝对定位（position:absolute）或固定定位（position:fixed）的元素，才是真正意义的脱离文档流。

---