<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .test{ zoom: 1; border: 1px solid #f00; } .test:after{ display: block; clear: both; visibility: hidden; height: 0;content: '';}</style></head><body><div>
清除浮动 方法1： test{clear:both;} test为浮动元素的下一个兄弟元素 方法2： test{display:block;zoom:1;overflow:hidden;} test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3： test{zoom:1;} test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
</div><div style="border: 1px solid #f00;"><div style="float: left;">左浮动</div><div style="clear: both;">下一个兄弟元素清除浮动</div></div><div style="border: 1px solid #f00;display: block;zoom: 1;overflow: hidden;margin: 10px 0;"><div style="float: left;">左浮动</div> </div><div class="test"><div style="float: left;">左浮动</div> </div></body></html>
