float浮动的原理和工作方式，以及浮动造成的问题总结

浮动float

浮动元素是脱离文档流的，不占据空间。

浮动元素碰到包含它的元素的边框或者其他浮动元素的边框会停留下来。

 

浮动元素会引起的问题：

1）父元素的高度无法撑开，影响与父元素的同级元素。

2）与浮动元素同级的非浮动元素（内联元素）会跟随其后。

3）若非第一个元素浮动，则该元素之前的元素也需要跟随其后，否则会影响页面的显示的结构。

清除浮动的几种方法：

1）<div style=”clear:both”></div>可以很好的解决浮动的2，3问题

增加了一个额外的元素，这是一个弊端，会使得html页面结构看起来不够简洁。

 

2）该方法比较好。可以很好的解决第一种浮动问题

#parent:after{

content:’.’;

height:0;

visibility:hidden;

display:block;

clear:both;

}

 

3）让overflow设置为hidden或auto

给包含浮动元素的父标签添加css属性。

overflow:auto;

zoom:1;<可以兼容ie6>