您的位置：首页 > Web前端 > CSS

css清除浮动的最好的方式和原因

2019-04-29 13:16 323 查看
                     清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
不清浮动：

清浮动：

原理：
（1） display:block使生成的元素以块级元素显示,占满剩余空间
（2）height:0避免生成内容破坏原有布局的高度
（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
（4）通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:”.”有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的
（5）zoom：1触发IE hasLayout。
<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>Document</title>    <style>      .box {        width: 510px;        border: #0000FF solid 1px;      }      .box:after {        content: "";        visibility: hidden;        display: block;        height: 0;        clear: both;      }      .left {        float: left;        width: 250px;        height: 100px;        background-color: green;      }      .right {        float: left;        width: 250px;        height: 100px;        background-color: red;      }      .backdiv{        width: 100px;        height: 100px;        background: #101010;        margin-left: 510px;      }    </style>  </head>  <body>    <div class="box">      <div class="left"></div>      <div class="right"></div>    </div>    <div class="backdiv"></div>  </body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
           
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航