本文详细介绍了CSS中清除浮动的方法，包括使用伪元素、overflow属性等技术手段，并探讨了这些方法在不同浏览器中的兼容性问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03清浮动</title>
<style type="text/css">
.fatdiv{
border: 20px solid black;
background-color: pink;
/*height: 300px;*/
/*
清浮动第一种方式:
1,给父元素设置高度
拓展性不好
2,让父级也浮动
不太常用
*/
/*float: left;*/
/*
* 3,给父亲设置display:inline-block;属性
* 但是IE 6不支持该属性
*/
/*display: inline-block;*/
/*
* 6,给父级设置ovreflow:hidden;属性
* IE 6需要结合 zoom 属性才会起作用
*/
/*overflow: hidden;*/
}
/*
* 7,使用伪元素清浮动
* IE 6中也存在兼容性问题
*/
.fatdiv:after{
content: "";
display: block;
clear: both;
}
.sondiv{
width: 500px;
height: 300px;
background-color: red;
float: left;
}
/*.cleardiv{
clear: both;
}*/
</style>
</head>
<body>
<!--
清浮动:清除浮动所产生的影响
-->
<div class="fatdiv">
<div class="sondiv"></div>
<!--
4,利用换行标签清除浮动
违背了标签和样式相分离的原则
-->
<!--<br clear="all"/>-->
<!--
5,利用空标签清浮动
清除的是兄弟元素浮动以后产生的影响
但是IE 6下空标签也会有默认行高(19px)
-->
<!--<div class="cleardiv"></div>-->
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
