自丢网

标题: 三种清除浮动的样式方法案例教程附带代码 [打印本页]

作者: admin    时间: 2020-4-23 14:03
标题: 三种清除浮动的样式方法案例教程附带代码
三种清除浮动的样式方法案例教程附带代码
  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>
复制代码







欢迎光临 自丢网 (https://www.zidiu.com/) Powered by Discuz! X3.5