上次我们一起研究了css浮动，这次我们一起学习一下浮动对排版造成的影响，以及清除浮动影响的方式。

　　首先，我们来看一下浮动对合资高度的影响：

　　在标准流中内容的高度可以撑起盒子的高度：

　　示例代码：

　　在浮动流中浮动元素内容的高不可以撑起盒子的高度：

　　示例代码： 

　　下面我们看下浮动对布局造成的影响：　　

　　浮动的盒子会释放空间，导致下面的盒子会移动到上面，并占据所有的空间，但浮动盒子的内容会把下面盒子的内容挤到一边，如图：

 　　请看示例代码：

.div1{ float .div2{ background-color p{ width height background-color我浮动了我浮动了我浮动了我浮动了我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子我是蚊子

　　浮动带来的影响会给我们的排版造成很大的麻烦，那么我们就要想办法清除浮动带来的影响:

　　清除浮动影响前前：

　　1、方法一：给前面的父盒子添加高度，如图：　

　　添加高度后：

　　示例代码：

*{ margin padding .box1{ background-color height .box2{ background-color ul{ list-style .ul01 li{ background-color .ul02 li{ background-color ul li{ float大娃二娃三娃这是后面的1这是后面的2这是后面的3

　　2、方法二：利用clear:both;属性清除前面浮动元素对我的影响

　　添加clear:both;后：

　　示例代码：

*{ margin padding .box1{ background-color .box2{ background-color clear margin-top ul{ list-style .ul01 li{ background-color .ul02 li{ background-color ul li{ float大娃二娃三娃这是后面的列表项1这是后面的列表项2这是后面的列表项3

　　ps：使用clear:both之后margin属性会失效　　

　　3、方法三：在两个有浮动子元素的盒子之间添加一个额外的块级元素

　　添加后：

　　示例代码：

*{ margin padding .box1{ background-color .box2{ background-color ul{ list-style .ul01 li{ background-color .ul02 li{ background-color ul li{ float .wall{ clear .h20 height background-color大娃二娃三娃这是后面的列表项1这是后面的列表项2这是后面的列表项3

 　　ps:

　　4、方法四：在前面一个盒子的最后添加一个额外的块级元素

　　添加后：

　　示例代码：

*{ margin padding .box1{ background-color .box2{ background-color margin-top ul{ list-style .ul01 li{ background-color .ul02 li{ background-color ul li{ float .wall{ clear大娃二娃三娃这是后面的列表项1这是后面的列表项2这是后面的列表项3

　ps：　

　　5、方法五：给浮动元素父元素添加overflow:hidden;属性

　　overflow:hidden的作用是清除溢出盒子边框外的内容

　　添加后：

　　示例代码：