清除浮动的几种方法
页面布局中，我们经常会用到元素浮动，在很好的显示效果的同时，也带给我们带来了许多副作用，比如影响其他元素位置。
那么，如何清除这些浮动呢？下面就为大家推荐几种清除浮动的小方法：
一、空标签清除浮动: .clear{clear:both}
1、clear语法：
clear : none|left|right|both
2、clear参数值说明：
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
3、示例：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} .clearfloat{clear:both} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2">div2</div> </body> </html>
4、优缺点：
优点：通俗易懂，容易掌握
缺点：会添加大量无语义标签，结构与表现未分离，不利于维护
二、父元素设置overflow:hidden
1、overflow语法：
overflow : visible | hidden | scroll | auto | inherit
2、overflow参数值说明：
visible : 默认值。内容不会被修剪，会呈现在元素框之外。
hidden : 内容会被修剪，并且其余内容是不可见的。
scroll : 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto : 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit : 规定应该从父元素继承 overflow 属性的值。
3、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;overflow:hidden} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
4、优缺点：
优点：不存在结构和语义化问题，代码量少
缺点：内容增多时容易造成不会自动换行的后果，导致内容被隐藏，无法显示需要一处的元素。
三、父元素设置overflow:auto
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;overflow:auto} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、优缺点：
优点：不存在结构和语义化问题，代码量少
缺点：多个嵌套后，FF在某种情况下会造成内容全选;IE在mouseover造成宽度改变时会造成最外层模块出现滚动条。
四、父元素设置display：table
1、display语法
display:table: 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
2、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;display:table;margin-bottom:10px;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
3、优缺点：
优点：结构化语义完全正确，代码量少
缺点：和模型属性已更改，不推荐使用。
五、父元素设置hieght
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;height:200px;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、优缺点：
优点：简单易懂，代码量少
缺点：只适合高度固定的布局，要给出精确的高度，不利于维护
六、父元素一起浮动
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;margin-bottom:10px;float:left;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;clear:both} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、优缺点：
优点：不存在结构和语义化问题，代码量少
缺点：与父元素相邻的元素布局会受到影响，不可能一直浮动到body层吧，不推荐使用。
七、使用::after伪元素
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} .div1::after{display:block;clear:both;content:"";visibility:hidden;height:0} .div1{zoom:1} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、优缺点：
优点：结构化语义完全正确。
缺点：复用方式不当会造成代码量增加。且IE8之前版本不支持::after，需要使用zoom:1触发haslayout.
