请选择 进入手机版 | 继续访问电脑版
三种清除浮动的样式方法案例教程附带代码
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>

  8. <body>
  9.     <style>
  10.         .one {
  11.             /* overflow: hidden; 第一种方法*/
  12.             width: 500px;
  13.             border: 1px solid red;
  14.         }
  15.         
  16.         .damao {
  17.             float: left;
  18.             width: 200px;
  19.             height: 200px;
  20.             background-color: pink;
  21.         }
  22.         
  23.         .ermao {
  24.             float: left;
  25.             width: 250px;
  26.             height: 200px;
  27.             background-color: #c5c;
  28.         }
  29.         
  30.         .clearfix:after {
  31.             content: "";
  32.             display: block;
  33.             height: 0;
  34.             visibility: hidden;
  35.             clear: both;
  36.         }
  37.         
  38.         .clearfix {
  39.             zoom: 1;
  40.             /*第二种方法 ie6,7 专I ]清除浮动的样式*/
  41.         }
  42.         
  43.         .two {
  44.             width: 200px;
  45.             height: 200px;
  46.             background-color: black;
  47.         }
  48.     </style>
  49.     <div class="one clearfix">
  50.         <div class="damao"></div>
  51.         <div class="ermao"></div>
  52.     </div>
  53.     <!-- <div style="clear: both;"></div> 第三种方法-->
  54.     <div class="two">
  55.     </div>
  56. </body>

  57. </html>
复制代码


推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

发布主题
  • 今日更新:0 昨日更新:2
  • 模板总数:8435
打造全国最大模板下载平台
技术维护在线

QQ:515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们

POWERED BY 模板下载 © 2020-2030 WWW.ZIDIU.COM( 粤ICP备17166275号 )