首页 > 代码库 > H5 67-清除浮动方式三
H5 67-清除浮动方式三
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>67-清除浮动方式三</title> <style> *{ margin: 0; padding: 0; } .box1{ background-color: red; /*margin-bottom: 10px;*/ } .box2{ background-color: green; /*margin-top: 10px;*/ } .box1 p{ width: 100px; background-color: blue; } .box2 p{ width: 100px; background-color: yellow; } p{ float: left; } .wall{ clear: both; } .h20{ height: 20px; background-color: skyblue; } </style> </head> <body> <!-- 1.清除浮动的第三种方式 隔墙法 2.外墙法 2.1在两个盒子中间添加一个额外的块级元素 2.2给这个额外添加的块级元素设置clear: both;属性 注意点: 外墙法它可以让第二个盒子使用margin-top属性 外墙法不可以让第一个盒子使用margin-bottom属性 3.内墙法 3.1在第一个盒子中所有子元素最后添加一个额外的块级元素 3.2给这个额外添加的块级元素设置clear: both;属性 注意点: 内墙法它可以让第二个盒子使用margin-top属性 内墙法它可以让第一个盒子使用margin-bottom属性 4.外墙法和内墙法区别? 外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度 5.在企业开发中不常用隔墙法来清除浮动 --> <div class="box1"> <p>我是文字1</p> <p>我是文字1</p> <p>我是文字1</p> <div class="wall h20"></div> </div> <!--<div class="wall h20"></div>--> <div class="box2"> <p>我是文字2</p> <p>我是文字2</p> <p>我是文字2</p> </div> </body> </html>
H5 67-清除浮动方式三
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。