HTML连载49-清除浮动的第三种方式（内外墙法）
一、清除浮动的第三种方式
1.隔墙法有两种如下：外墙法和内墙法。
2.外墙法
（1）在两个盒子中间添加一个额外的块级元素
（2）给这个额外添加的块级元素设置：clear:both;属性
注意点：外墙法可以让第二个盒子使用margin-top属性
但是不能让第一个盒子使用margin-bottom属性
解决方案：为了避免上面的问题，我们在“墙”所在的元素设置高度就解决这个问题了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d134_clearfloatthree</title>
<style>
.box1{
background-color: red;
/*border:1px white solid;*/
}
.box2{
background-color: green;
/*border:1px white solid;*/
}
.box1 p{
width:100px;
background-color: blue;
float:left;
}
.box2 p{
width:100px;
background-color: red;
float:left;
}
.wall{
clear:both;
height:20px;
}
</style>
</head>
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
</div>
<div class="wall h20"></div><!--这里还复习了一个标签可以定义多个class属性的方式，多个属性可以统一设置样式-->
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
</body>
</html>
3.内墙法
（1）在两个盒子中间添加一个额外的块级元素
（2）给这个额外添加的块级元素设置clear:both;属性
注意点：外墙法可以让第二个盒子使用margin-top属性
也可以让第一个盒子使用margin-bottom属性
下面我们只修改上面例子的几行代码即可
.wall{
clear:both;
/*height:20px;*/
}
.......省略代码........
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
<div class="wall"></div>
</div>
4.外墙法与内墙法的区别
外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度。
5.注意点：不常用的外墙和内墙法，外墙法容易降低易读性，不知干什么的；内墙则违背了我们样式设计和内容相分离的初衷，所以仅作了解
三、源码：
d134_clearfloatthree.html
d135_clearfloatinternalwallmethod.html
地址:
https://github.com/ruigege66/html_learning/blob/master/d134_clearfloatthree.html
https://github.com/ruigege66/html_learning/blob/master/d135_clearfloatinternalwallmethod.html
2.csdn：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取java大数据学习视频礼包
上一篇： 黄桥烧饼是哪里的特产？来自哪？
下一篇： ASP中FSO的神奇功能 - 文件读取