CSS清除浮动

html元素类型

①、块状元素： 如div -------- display：block
②、内联元素： 如span -------- display：inline
③、内联块元素：如input --------- display：inline-block
在标准流中，三种类型的元素呈现的方式不同。
display:block 元素会独占一行，多个block元素会各自新起一行。
inline 和 inline-block元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行。
如果想block元素像inline元素不自动换行，可以用css的float属性（浮动）
left --------- 元素向左浮动。
right --------- 元素向右浮动。
none --------- 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit -------- 规定应该从父元素继承 float 属性的值。

如果里层的元素不浮动的话，那么外层父元素的高是会自动被撑开的。但是当内层元素浮动后，就出现了以下影响：
（1）背景不能显示
（2）边框不能撑开
（3）margin 设置值不能正确显示

解决浮动的负面影响

1.兄弟标签添加clear：both；

兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both; 就可以清除以上标签的浮动。

2. 给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

3.添加新的元素，应用 clear：both；

<style>
#box1{ width:200px; border:1px solid black; }
#box2{ width:100px; height:200px; background:red; float:left; }
.clear{ clear:both }
</style>
...
 <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
 </div>
 <span> aaaaaaa </span>

4.父级div定义 overflow: auto

<style>
#box1{ width:200px; border:1px solid black; overflow:auto;}
#box2{ width:100px; height:200px; background:red; float:left; }
</style>
...
<div id="box1">
    <div id="box2"></div>
</div>

overflow属性共有三个属性值：hidden,auto,visible。可以使用hiddent和auto值来清除浮动，visible值无法达到清除浮动效果。

5.利用伪类

利用:after和:before来在父元素内部插入两个元素块，达到清除浮动的效果。实现原理类似于clear:both方法，只是区别在于后者在html插入一个div.clear标签，而利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

 <style>
 #box1{ width:200px; border:1px solid black; }
 #box2{ width:100px; height:200px; background:red; float:left; }
.clear:after{ content:''; display:block; clear:both; }
...
<div id="box1" class="clear">
   <div id="box2"></div>
</div>