清除浮动 _生活百科

清除浮动清除浮动指清除掉元素float属性。
【清除浮动】假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设定div css border，父级css框线颜色为红色，两个子级框线颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设定相同高度100px，父级css height高度暂不设定（通常为实际css布局时候这样父级都不设定高度，而高度是随内容增加自适应高度）。
清除浮动介绍假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设定div css border，父级css框线颜色为红色，两个子级框线颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设定相同高度100px，父级css height高度暂不设定（通常为实际css布局时候这样父级都不设定高度，而高度是随内容增加自适应高度）。清除浮动方法给父级也加浮动<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}.div{ width:200px;height:200px;background:red;float:left;}/*清浮动1.给父级也加浮动(不居中了)*/</style></head><body><div class="box"><div class="div"></div></div></body></html>给父级加display:inline-block;<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}.div{ width:200px;height:200px;background:red;float:left;}/*清浮动1.给父级也加浮动2.给父级加display:inline-block*/</style></head><body><div class="box"><div class="div"></div></div></body></html>加<div class="clear"></div>.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，解决方法：font-size:0;或overflow:hidden;<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:300px;margin:0 auto;border:10px solid #000;}.div{ width:200px;height:200px;background:red;float:left;}.clear{ height:0px;font-size:0;clear:both;}/*清浮动1.给父级也加浮动2.给父级加display:inline-block3.在浮动元素下加<div class="clear"></div>.clear{ height:0px;font-size:0;clear:both;}*/</style></head><body><div class="box"> <div class="div"></div><div class="clear"></div></div></body></html>在浮动元素下加<br clear="all"><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:300px;margin:0 auto;border:10px solid #000;}.div{ width:200px;height:200px;background:red;float:left;}/*清浮动1.给父级也加浮动2.给父级加display:inline-block3.在浮动元素下加<div class="clear"></div>.clear{ height:0px;font-size:0;clear:both;}4.在浮动元素下加<br clear="all"/>*/</style></head><body><div class="box"><div class="div"></div><br clear="all"/></div></body></html>给浮动元素父级加{zoom:1;}<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;}.clear{zoom:1;}.clear:after{content:""; display:block;clear:both;}/*清浮动1.给父级也加浮动2.给父级加display:inline-block3.在浮动元素下加<div class="clear"></div>.clear{ height:0px;font-size:0;clear:both;}4.在浮动元素下加<br clear="all"/>5. 给浮动元素的父级加{zoom:1;}:after{content:""; display:block;clear:both;}**在IE6，7下浮动元素的父级有宽度就不用清浮动haslayout 根据元素内容的大小或者父级的父级的大小来重新的计算元素的宽高display: inline-blockheight: (任何值除了auto)float: (left 或 right)width: (任何值除了auto)zoom: (除 normal 外任意值)*/</style></head><body><div class="box clear"><div class="div"></div></div></body></html>给浮动元素父级加overflow:hidden;<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:300px;border:1px solid #000;overflow:hidden;}.div1{ width:260px;height:400px;background:Red;float:left;} </style></head><body><div class="box"><div class="div1"></div></div></body></html>