清除浮动
程序员文章站
2024-01-29 12:37:10
...
一个块级元素如果没有设置height，其高度就是由里面的子元素撑开，
如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，
如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
清除浮动的方法
1、父级使用after伪元素清除浮动
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0}
.clearfloat{
zoom:1
} /*，zoom(IE转有属性)可解决ie6,ie7浮动问题，其他浏览器不执行*/
2、在最后一个浮动标签后，添加一个空标签，给其设置class clear：both；
.clearfloat{
clear: both;
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
3、父级添加overflow:hidden，通过触发BFC方式，实现清除浮动
.div1{background:#000080;border:1px solid red;overflow: hidden;}
4、给父级元素设置高度，缺点在于如果子元素的高度大于设置的父元素的高度，则问题出现
上一篇： thinkphp安装以后的有关问题
下一篇： php xml 入门学习资料