css中浮动的影响以及去除浮动的方法详解

浮动带来的影响

现代浏览器的表现
放置两个相邻的行内元素，如果设置第二个行内元素为左浮动，那么该行内元素被设置浮动后，其display会被修改为block；但是其大小会根据设置或其内容的大小进行表现。并不会占据整行的空间，其旁边的行内元素，就会在这一行的浮动元素后面，并不会与浮动元素平起平坐。
但是如果其旁边是设定了宽度的行内块级元素，那么这个行内块级元素也会在浮动元素后面。
如果其旁边是块级元素，那么这个块级元素会占据该设置浮动的行内元素的空间。
如果说原因，我也说不上来。

在IE7及以前版本的ie浏览器
旁边的行内元素会在浮动元素另起一行的下面，是不是更奇怪。

块级元素浮动后
浏览器会收回块级元素原来占据的空间，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。而设置浮动的块级元素本身就保持原来的位置，默默地看着他影响的元素改变。
该浮动元素的父元素的边框也会收缩至父元素内没有设置浮动的子元素。

行内元素浮动后
其实这个貌似在我目前做的练习上没有看过有这样进行设置的，但是他确实也带来了不一样的体验。

接下来就是围住浮动元素的几种方法，及各个方法的适应场合。

简单的在html标记中添加一个子元素，并给他应用clear属性。

 <section >
 <img src="7f0ff.png" alt="" style="float:left" />
 <p>it s fun to float</p>
 <p style="clear:left;"></p>
 </section>
 <footer>
 here is the footer element.
 </footer>

但是如果，我们特别不想添加这个纯表现元素，可以采用css来添加这个清除元素。为section添加一个类：.clearfix

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

方法一：为父元素添加：overflow:hidden
这种方法强制父元素包围浮动的子元素。
实际上：overflow：hidden声明的真正用途是防止包含元素被超大的内容撑大。应用overflow：hidden之后，包含元素依然保持其设定的宽度及高度，而超大的字内容会被容器切掉。除此之外，overflow:hidden还有一个作用，即它能可靠的迫使父元素包含其浮动的子元素。
但是，带来的后果就是字内容一旦超出设定宽度就会看不见。

方法二：同时浮动父元素
其实这个对于整个网站布局并不算的上是清楚浮动，只是使得父元素包围住了浮动的子元素，但是父元素浮动虽然包围住了浮动子元素，但却没能解决父元素自身的浮动对整个网站布局的影响，我看到有些网站的源码还是会喜欢用这种方法，然后再在这个浮动父元素的外面再包围一个父元素，并为他设置宽度，高度，以保证不影响网页中其他内容的布局。

方法三：添加非浮动的清除元素
就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素的浮动。
然而在包含元素的最后添加子元素作为清除元素的方式有两种。