• 技术文章 >Web开发 >css教程

    css清除浮动的原因

    小妮浅浅小妮浅浅2021-08-23 20:33:03原创4522

    原因分析

    1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。

    如果一个块级元素没有设置height,它的height是由子元素打开的。

    2、使用浮动后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以打开其高度,所以父级元素的height会被忽略。

    这就是所谓的高度塌陷。

    实例

    <!DOCTYPE html>
    <html>
      <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>
          <div></div>
          <div></div>
        </div>
        <div></div>
      </body>
    </html>

    以上就是css清除浮动的原因,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css清除浮动
    品易云
    上一篇:css中clear属性是什么 下一篇:css有哪些清除浮动的方法

    相关文章推荐

    • css中流的概念介绍• css文档流的两种特性• css使用transform垂直对齐• css中position常见的四个属性值• css中sticky属性是什么• css中sticky属性有什么特点• css浮动有哪些特性• css浮动元素的规则介绍• css浮动元素的重叠问题• css中clear属性是什么

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网