CSS-21.清除浮动的常用方式（隔墙法）

最新推荐文章于 2022-07-04 23:20:04 发布

别忘了缩进

最新推荐文章于 2022-07-04 23:20:04 发布

阅读量887

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_34737697/article/details/79185641

版权

29 篇文章 0 订阅

订阅专栏

 
 隔墙法： 

 
 外墙法： 

 
 1.在两个盒子中间添加一个额外的块级元素 

 
 2.给这个额外添加的块级元素设置clear:both;属性 

 
 注意点 
 ：外墙法它可以让第二个盒子使用margin-top属性 

 
 外墙法不可以让第一个盒子使用margin-bottom属性 

 
 内墙法： 

 
 1.在第一个盒子中所有子元素最后添加一个额外的块级元素 

 
 2.给这个额外添加的块级元素设置clear:both;属性 

 
 注意点： 
 内墙法可以让第二个盒子使用margin-top属性 

 
 可以让第一个盒子使用margin-bottom属性 

 
 两者区别：外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>清除浮动</title> 

  <style> 

*{

  margin: 0px; 

  padding: 0px; 

}

  .dd{ 

  background-color: #00ff15; 

}

  .ddd{ 

  background-color: #ff2000; 

}

p{

  float: left; 

  background-color: #e9ff9c; 

}

 
 .wall{ 

 
 clear: both; 

}

 
 .h20{ 

 
 height: 20px; 

}

  </style> 

  </head> 

  <body> 

  <div class="dd"> 

  <p>我是文字</p> 

  <p>我是文字</p> 

  <p>我是文字</p> 

  </div> 

 
 <div class="wall h20"></div> 

  <div class="ddd"> 

  <p>我是文字</p> 

  <p>我是文字</p> 

  <p>我是文字</p> 

  </div> 

  </body> 

  </html> 

关注

专栏目录