CSS之浮动

在使用CSS编写代码时，我们经常会用到一个属性:float，使用它会使网页的排版达到我们所期待的效果，但是在此同时使用它也会带来一些负面影响，而又怎么清除这些负面影响，这就是这篇文章的主题。

一、什么是浮动？

通过设置float的值不为none，使得元素按特定的方向脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留

二、浮动所带来的负面影响

1、会把行级元素，块级元素隐式的转换成行级块元素。

2、在没有定义具体宽度的情况下，使自身的宽度从100%变为内容的宽度和高度。

3、脱离其父元素，从而无法撑开父元素的高度，从而造成高度塌陷。

4、在当前行上脱离原来的位置，如果有块级兄弟元素，会占用该元素原来的位置，并处于该元素下层。

5、如果有行级兄弟元素，则兄弟元素会环绕浮动元素排列。

三、清除浮动的几种办法

1、clear:both；

2、父元素设置overflow:hidden/auto; zoom:1;

其中overflow:hidden;的作用是溢出隐藏，清除浮动。

3、不多说，直接上代码（推荐用法）

.fix{
	display:block;
	content:'.';
	height:0;
	clear:both;
	visibility: hidden;
}

再来一个

.fix{
	display:block;
	content:'';
	clear:both;
}

应用浮动带来的影响还是很大的，所以我们千万不能忘了清除浮动这个步骤~