css清除浮动
css清除浮动一、使用浮动时出现的情况
1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置宽高的时候宽度由内容撑开
4.换行不被解析
5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止
二、清除浮动的方法
1、用clearfix清除浮动
<html >
<head>
<title> css用clearfix清除浮动实例</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style type="text/css">
/**//*所有主流浏览器都支持 :after 伪元素。*/
.clearfix:after{}{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{}{*+height:1%;}/**//*不知道有什么用处，不加ie7也没有问题*/
.box{}{ background:#111;width:500px; position:relative;}
.l{}{float:left; background:#333;width:200px; height:100px;}
.r{}{float:right;background:#666;width:200px; height:200px;}
.s{}{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
</style>
<li class="box clearfix">
<li class="l">left</li>
<li class="r">right</li>
<li class="s">absolute</li>
</li>
</body>
</html>
2、父级li定义 height
<style type="text/css">
.li1{background:#000080;border:1px solid red;height:200px;}
.li2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<li class="li1">
<li class="left">Left</li>
<li class="right">Right</li>
</li>
<li class="li2">
li2
</li>
3、在浮动元素后面增加<br/>标签
<br/>标签有自带的清除浮动属性
4、在浮动元素后面增加一个清除浮动层
<li>
<li style="float:left"></li>
<li style="float:left"></li>
<li style="clear:both"></li>
</li>
5、给父级li定义overflow:auto样式
<style type="text/css">
.li1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
.li2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<li class="li1">
<li class="left">Left</li>
<li class="right">Right</li>
</li>
<li class="li2">
li2
</li>
6、父级li定义 伪类:after 和 zoom
<style type="text/css">
.li1{background:#000080;border:1px solid red;}
.li2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
标签：