1. 清除元素方式一
- 给前面一个父元素设置高度
注意点:在企业开发中，能不写高度尽量不写高度，所以这个方式不太推荐使用
2. 清除元素方式二
- 给后面的盒子添加clear属性
clear取值：
none:默认取值，按照浮动元素排序规则来排序
left：不要找前面的左浮动
right：不要找前面的右浮动
both：不要找前面的左浮动和右浮动
注意点：当我们给某个元素添加clear属性的之后，这个元素的margin属性会失效
3. 清除元素方式三
- 隔墙法
外墙法:给两个盒子中间添加块级元素并设置
clear:both;
注意点：
外墙法可以让第二个盒子使用margin-top属性，但是不可以让第一个盒子使用margin-bottom属性.所以使用外墙法的时候，一般会给添加的块级元素设置高度代替margin-top和margin-bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动问题</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background: red;
/*height: 30px;*/
}
.box1 p{
background: blue;
}
.box2{
background: green;
/*clear: left;*/
margin-top: 10px;
}
.box2 p{
background: yellow;
}
p{
float: left;
}
.clearboth{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
</div>
<div class="clearboth"></div>
<div class="box2">
<p>我是段落2</p>
<p>我是段落2</p>
<p>我是段落2</p>
</div>
</body>
</html>
内墙法
外墙法:给第一个盒子所有子元素最后添加块级元素并设置
clear:both;
注意点：
内墙法可以让第二个盒子使用margin-top属性，同时也可以让第一个盒子使用margin-bottom属性，还可以给额外添加的块级元素设置高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动问题</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background: red;
/*height: 30px;*/
/*margin-bottom: 10px;*/
}
.box1 p{
background: blue;
}
.box2{
background: green;
/*clear: left;*/
/*margin-top: 10px;*/
}
.box2 p{
background: yellow;
}
p{
float: left;
}
.clearboth{
clear: both;
height: 30px;
}
</style>
</head>
<body>
<div class="box1">
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
<div class="clearboth"></div>
</div>
<div class="box2">
<p>我是段落2</p>
<p>我是段落2</p>
<p>我是段落2</p>
</div>
</body>
</html>
4. 外墙法和内墙法的区别
- 外墙法不能撑起第一个盒子的高度，内墙法可以。
网友评论