css清除浮动
程序员文章站
2024-01-27 21:41:46
...
不清除浮动会导致内容高度塌陷，比如在浮动元素的父元素未设置高度的情况下，父元素会发生高度塌陷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a{
background-color: blue
}
.b{
float:left;
height:200px;
width:200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>上述代码的执行结果如下图，a元素（class为a的div元素）是b元素（class为b的div元素）的父元素，未给a元素设置宽度，b元素向左浮动，导致a元素高度塌陷。
那么如何消除浮动呢？
方法一：在浮动元素下面加上一个空的元素，并给其附上css样式：{clear:both}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a{
background-color: blue
}
.b{
float:left;
height:200px;
width:200px;
background-color: yellow;
}
.c{
clear:both;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>方法二：给浮动元素的父元素添加after伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a{
background-color: blue;
zoom:1;
}
.b{
float:left;
height:200px;
width:200px;
background-color: yellow;
}
.a:after{
content: ".";
clear:both;
display: block;
height:0;
overflow: hidden;
visibility:hidden;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</body>
</html>content:"."是在父元素结尾添加一个“.”，height:0是为了不让前面的“.”显示出来，“clear: both;display: block; "是确保"."是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是**父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它
最终结果：
上一篇： 0001-20180421-自动化-python基础学习笔记
下一篇： Handler原理