这里是HTML代码
<div class="box1">
<div class="items">元素1</div>
<div class="items">元素2</div>
<div class="items">元素3</div>
</div>
<div class="box2">
<div class="items">元素4</div>
<div class="items">元素5</div>
<div class="items">元素6</div>
</div>
1. 方法一:给父元素设置一个高度
// 但是这种方法不经常使用
.box1 {
height: 21px; // 第一个盒子的父元素设置高度
background-color: blue;
}
.box1 .items {
background-color: yellow;
}
.box2 {
background-color: red;
}
.box2 .items {
background-color: green;
}
.items {
float: left; // 设置左浮动
width: 200px;
}
2. 使用clear:both
这种方法相对于第一种方法较为简洁,但是会造成第二个盒子元素的margin-top属性无效。
/* 这种方法相对于第一种方法较为简洁,但是会造成第二个盒子元素的margin-top属性无效。
*/
.box1 {
background-color: blue;
}
.box1 .items {
background-color: yellow;
}
.box2 {
clear: both; // 给第二个盒子设置clear:both属性
background-color: red;
}
.box2 .items {
background-color: green;
}
.items {
float: left;
width: 200px;
}
3. 隔墙法
隔墙法主要是有外墙法和内墙法,这是外墙法。主要是在两个盒子之间添加一个div元素,再将添加的div元素设置clear:both。外墙法存在的主要问题是:第一个盒子的margin-bottom无效,但是第二个盒子的margin-top可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
background-color: #3ddd45;
}
.box2 {
margin-top: 300px;
background-color: #1fffed;
}
.box1 .items {
background-color: #ff5a5d;
}
.box2 .items {
background-color: #f635ff;
}
.items {
float: left;
width: 100px;
}
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="items">元素1</div>
<div class="items">元素2</div>
<div class="items">元素3</div>
</div>
<div class="wall"></div>
<div class="box2">
<div class="items">元素4</div>
<div class="items">元素5</div>
<div class="items">元素6</div>
</div>
</body>
</html>
这是内墙法。主要是在第一个盒子所有浮动的子元素的最后添加一个div元素,再将添加的div元素设置clear:both。
内墙法使得第一个盒子的margin-bottom和第二个盒子的margin-top都可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
background-color: #3ddd45;
}
.box2 {
margin-top: 300px;
background-color: #1fffed;
}
.box1 .items {
background-color: #ff5a5d;
}
.box2 .items {
background-color: #f635ff;
}
.items {
float: left;
width: 100px;
}
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="items">元素1</div>
<div class="items">元素2</div>
<div class="items">元素3</div>
<div class="wall"></div>
</div>
<div class="box2">
<div class="items">元素4</div>
<div class="items">元素5</div>
<div class="items">元素6</div>
</div>
</body>
</html>
隔墙法可以清除浮动,但是会添加一些只用于清除浮动的div元素,因此不符合我们前端的思想。
4. 使用伪元素
伪元素的思想和隔墙法的思想是一样的 ,但是明显使用伪元素的方法要合理一些。但要注意的一点是必须在box1的样式中添加*zoom:1,用于兼容IE6。
.box1 {
background-color: blue;
*zoom: 1; // 用于兼容IE6
}
.box1::after { // 添加伪元素,在box1后添加一个不显示的空元素
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.box1 .items {
background-color: yellow;
}
.box2 {
background-color: red;
}
.box2 .items {
background-color: green;
}
.items {
float: left;
width: 200px;
}
5. 使用overflow:hidden
overflow清除浮动需要注意的和伪元素清除浮动的一样,即注意兼容IE6,在第一个盒子中添加*zoom:1。
.box1 {
overflow: hidden; // 在这里添加
*zoom: 1; // 用于兼容IE6
background-color: blue;
}
.box1 .items {
background-color: yellow;
}
.box2 {
background-color: red;
}
.box2 .items {
background-color: green;
}
.items {
float: left;
width: 200px;
}
个人笔记1