一、清除浮动的第三种方式
1.隔墙法有两种如下：外墙法和内墙法。
2.外墙法
（1）在两个盒子中间添加一个额外的块级元素
（2）给这个额外添加的块级元素设置：clear:both;属性
注意点：外墙法可以让第二个盒子使用margin-top属性
但是不能让第一个盒子使用margin-bottom属性
解决方案：为了避免上面的问题，我们在“墙”所在的元素设置高度就解决这个问题了。
<!doctype html><html lang="en"><head> <meta chart="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; hei外国流行歌曲ght:20px; 入党申请书范文2010 }</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大数据学习视频礼包
本文发布于:2023-04-07 06:37:57，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/6a55c841cab1ae9f544895ff5b306d80.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML连载49.doc
本文 PDF 下载地址：HTML连载49.pdf
| 留言与评论（共有 0 条评论） |
