额外标签法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消除浮动1(脱标)</title>
<style>
.a1,
.a2{
float: left;
}
.al{
width: 100px;
height: 100px;
background-color: #00008B;
}
.a2{
width: 100px;
height: 100px;
background-color: #008000;
}
.a3{
width: 300px;
height: 100px;
background-color: #8A2BE2;
}
</style>
</head>
<body>
<!--额外标签法-->
<!--相比于加额外块,
额外标签法的代码比较清晰。
-->
<div class="a1"></div>
<div class="a2"></div>
<div style="clear: both;"></div>
<div class="a3"></div>
</body>
</html>
加额外块法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消除浮动2(脱标)</title>
<style>
.a1,
.a2{
float: left;
}
.al{
width: 100px;
height: 100px;
background-color: #00008B;
}
.a2{
width: 100px;
height: 100px;
background-color: #008000;
}
.a3{
width: 300px;
height: 100px;
background-color: #8A2BE2;
}
</style>
</head>
<!--
此处,我们里边是脱标的,
但是外边没有脱标。
我们这里不设置,
还是不管用的。
我们在这里可以防止里面的设置溢出到外边。-->
<body>
<div style="overflow: hidden;">
<!--加额外块法-->
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="a3"></div>
</body>
</html>
伪元素法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消除浮动3(脱标)</title>
<style>
.a1,
.a2{
float: left;
}
.al{
width: 100px;
height: 100px;
background-color: #00008B;
}
.a2{
width: 100px;
height: 100px;
background-color: #008000;
}
.a3{
width: 300px;
height: 100px;
background-color: #8A2BE2;
}
/**
* 伪元素法:
* 需要增加额外的标签
*/
.clearfix:after{
/*此处表示应用该样式的后边内容为空*/
content: "";
display: block;
height: 0;
/*清楚左右浮动*/
clear: both;
/*隐藏*/
visibility: hidden;
}
.clearfix
/*是用来放大缩小的,
用来启动浏览器清除浮动*/
*zoom:1;
/*IE6、7专有*/
}
</style>
</head>
<!--
此处,我们里边是脱标的,
但是外边没有脱标。
我们这里不设置,
还是不管用的。
我们在这里可以防止里面的设置溢出到外边。-->
<body>
<!--伪元素法:
内容增多的时候,
容易造成不会自动换行,
导致内容被隐藏掉,
无法显示需要溢出的内容。
-->
<div class="clearfix">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="a3"></div>
</body>
</html>
双伪元素法(比为元素代码简洁)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消除浮动4(脱标)</title>
<style>
.a1,
.a2{
float: left;
}
.al{
width: 100px;
height: 100px;
background-color: #00008B;
}
.a2{
width: 100px;
height: 100px;
background-color: #008000;
}
.a3{
width: 300px;
height: 100px;
background-color: #8A2BE2;
}
/**
* 双伪元素法:
* 需要增加额外的标签,
* 比伪元素法简洁
*/
.classfix:before,
.clearfix:after{
/*此处表示应用该样式的后边内容为空*/
content: "";
display: table;
/*这句话可以发出BFC BFC可以清除浮动*/
}
.clearfix:after{
clear:both;
}
.clearfix
/*是用来放大缩小的,
用来启动浏览器清除浮动*/
*zoom:1;
/*IE6、7专有*/
}
</style>
</head>
<!--
此处,我们里边是脱标的,
但是外边没有脱标。
我们这里不设置,
还是不管用的。
我们在这里可以防止里面的设置溢出到外边。-->
<body>
<!--伪元素法:
内容增多的时候,
容易造成不会自动换行,
导致内容被隐藏掉,
无法显示需要溢出的内容。
-->
<div class="clearfix">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="a3"></div>
</body>
</html>