浮动对页面的影响：
如果一个父元素中包含一个子元素，父元素没有设置高度，子元素再父元素中进行了浮动。那么这个时候，父元素的高度为0，因此父元素的兄弟元素就会自动部位，那么这个时候就需要进行浮动的清除。
html代码及样式：
存在浮动问题的html
html表现的样式
清除浮动后效果
解决方法：
方法一：直接给父元素添加 height
.div1{ height:200px; }
原理：父元素div手动定义height，就解决了父元素div无法自动获取到高度的问题
优点：简单、代码少、容易掌握
缺点：只能使用高度固定的布局，要给出精确的高度，如果高度和父元素div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
方法二：结尾处加空的div标签：clear:both
修改上面的原来的代码为下面的样子：
<div class = 'div1'>
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
<div class='clearfloat'></div>
</div>
.clearfloat { clear : both; }
原理：添加一个空div 利用css提高的clear：both清除浮动，让父元素div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要添加很多空div，感觉不好
建议：不建议使用，但此方法是以前主要使用的一种清除浮动方法
补充：css clear属性（点击此处访问）
方法三：父元素div定义 伪类:after 和 zoom
.div1:after{
diaplay:block;
clear:both;
content:'';
visibility:hidden;
height:0;
}
.div1{ zoom:1; }
原理：IE8以上和非IE浏览器才支持：after，原理和方法2有点类似，zoom（IE专有属性）可解决IE6、IE7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾讯，网易，新浪等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
建议：建议使用，建议定义公共类，以减少CSS代码
方法四：父类div定义 overflow:hidden
.div1{
width:98%;
overflow:hidden;
}
原理：必须定义width或zoom:1,同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸会被隐藏
建议：只建议没有使用position或对overflow:hidden理解比较深的朋友使用
方法五：父元素div定义 overflow:auto
.div1{
width:98%;
overflow:auto;
}
原理：必须使用width或zoom:1;同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父元素div时间，会出现滚动条
建议：不建议使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧
最后：
参考访问的页面：http://www.jb51.net/css/173023.html
另外还有几个不建议的没有列举出来，感兴趣的可以进入上面的网页查看。
另外：设置元素浮动后，该元素的display值自动变成block
网友评论