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

最新推荐文章于 2024-04-29 16:58:49 发布

开心大表哥

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量5.8k

点赞数 3

分类专栏： css3 基础加固

本文链接：https://blog.csdn.net/a419419/article/details/80152049

版权

基础加固同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

css3

25 篇文章 3 订阅

订阅专栏

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
不清浮动：
这里写图片描述
清浮动：

原理：
（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>

开心大表哥

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css清除浮动的最好的方式和原因

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。不清浮动：清浮动：原理：（1） display:block使生成的元素以块级元素显示,占满剩余空间（2）height:0避免生成内容破坏原有布局的高度（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和...
复制链接

扫一扫

专栏目录