浮动的清除
-
清除浮动的原因
浮动不清楚 对周围的元素布局造成影响,浮动的元素也不能撑开父亲 -
清除浮动的方案:
-
未清除浮动之前样式
-
清除浮动 法一:给父亲增加高度
- i: 给浮动元素所在父盒子增加高度,关住浮动,但是一般工程上,我们不对父盒子设置高度,父盒子高度由儿子撑开
-
清除浮动 法二:clear属性
- ii: clear:both
清除左右浮动的影响,浮动元素所在父盒子没有设置高度,可以由儿子撑开。但是,多添加了一个div,是网页结构更加复杂。
- ii: clear:both
-
清除浮动 法三:overflow
- iii: overflow:hidden
- 可以通过触发BFC(Block Formatting Context (块级格式化上下文) 的简称)的方式,实现清除浮动效果
- iii: overflow:hidden
-
清除浮动 法四:利用伪元素
- iv: 利用after伪元素
-
清除浮动 法五:双伪元素(推荐)
- v: 双伪元素
-
未清楚浮动之前样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap1 {
width: 600px;
background-color: green;
}
.wrap1 .son1 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
.wrap1 .son2 {
width: 280px;
height: 100px;
background-color: skyblue;
float: left;
}
.wrap2 {
width: 680px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="wrap2"></div>
</body>
</html>
返回顶层目录
清除浮动 — 给父亲增加高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap1 {
width: 600px;
height: 100px; /*给父亲添加一个高度*/
background-color: green;
}
.wrap1 .son1 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
.wrap1 .son2 {
width: 280px;
height: 100px;
background-color: skyblue;
float: left;
}
.wrap2 {
width: 680px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="wrap2"></div>
</body>
</html>
返回顶层目录
清除浮动 —clear属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap1 {
width: 600px;
background-color: green;
}
.wrap1 .son1 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
.wrap1 .son2 {
width: 280px;
height: 100px;
background-color: skyblue;
float: left;
}
.wrap2 {
width: 680px;
height: 300px;
background-color: purple;
}
.clear {
clear: both; /*清除浮动 */
}
</style>
</head>
<body>
<div class="wrap1">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
<div class="wrap2"></div>
</body>
</html>
返回顶层目录
清除浮动 — overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap1 {
width: 600px;
background-color: green;
overflow: hidden; //清楚浮动
}
.wrap1 .son1 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
.wrap1 .son2 {
width: 280px;
height: 100px;
background-color: skyblue;
float: left;
}
.wrap2 {
width: 680px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="wrap2"></div>
</body>
</html>
返回顶层目录
清除浮动 — 利用伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap1 {
width: 600px;
background-color: green;
}
.wrap1 .son1 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
.wrap1 .son2 {
width: 280px;
height: 100px;
background-color: skyblue;
float: left;
}
.wrap2 {
width: 680px;
height: 300px;
background-color: purple;
}
/*伪元素产出的是行内元素*/
.clearfix::after {
content: "."; /*尽量加不要空 */
display: block; /*转块元素*/
clear: both; /*清除浮动*/
height: 0; /*高度为0*/
visibility: hidden;/*隐藏盒子*/
}
.clearfix {
*zoom: 1; /* zoom是ie6 7 清除浮动用的属性
*表示该属性只有ie6 7 识别
*/
}
</style>
</head>
<body>
<div class="wrap1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="wrap2"></div>
</body>
</html>
返回顶层目录
清除浮动 — 双伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap1 {
width: 600px;
background-color: green;
}
.wrap1 .son1 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
.wrap1 .son2 {
width: 280px;
height: 100px;
background-color: skyblue;
float: left;
}
.wrap2 {
width: 680px;
height: 300px;
background-color: purple;
}
/* 推荐使用 代码简洁*/
.clearfix:before,
.clearfix:after {
content: "";
display: table; /* 触发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.wrap2:after {
content: "abc";
}
</style>
</head>
<body>
<div class="wrap1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="wrap2"></div>
</body>
</html>