CSS清除浮动的三种方法_html/css_WEB-ITnose

说说 float 的几个要点就行了：
只有左右浮动，没有上下浮动。

元素设置 float 之后，它会脱离普通流（和 position: absolute; 一样），不再占据原来那层的空间，还会覆盖下一层的元素。

浮动不会对该元素的上一个兄弟元素有任何影响。

浮动之后，该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后（很好理解，因为该元素脱离普通流了，或者说不在这一层了，所以它的下一个元素当然要补上它的位置）。

如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似「文字围绕图片」的效果。（可参考CSS float浮动的深入研究、详解及拓展(一)中的讲解）

下一个兄弟元素如果也设置了同一方向的 float，则会紧随该元素之后显示。
该元素将变为块级元素，相当于给该元素设置了 display: block;（和position: absolute; 一样）。

CSS清除浮动的方法有哪些呢？经常性地会使用到float，很多邪门的事儿都有可能是浮动在作怪，清除浮动是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

下面看今天的教程，此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

1  5 
     6 
Left
     7 
Right
8 

一、使用空标签清除浮动
　　我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用

 1   7 
      8 
Left
      9 
Right
     10 
 11 

1  
     5 
Left
     6 
Right
 <7 /div>

1  5 
     6 
Left
     7 
Right
 8