浮动与清除浮动

一、为什么会出现浮动？

　　主要是父元素没有支撑的东西，导致父元素高度塌陷

二、为什么要清除浮动？　

　　如果在标准流下面一个父元素没有设置高度属性,那么它的高度就会被子元素的高度撑开，即自适应。但是如果这个父元素中的子元素是浮动的话，由于浮动元素不再占用原文档流的位置，浮动元素的高度不会计算在父元素的高度中，父元素的高度会为0，即呈现塌陷的状态。我们为了解决这类问题，提出了清除浮动。

三、清除浮动的方法

方法1:在需要清除浮动的元素前面添加一个空的div或者在清除浮动元素box3本身使用clear（本质就是闭合浮动）

　　                                           

            红色盒子和绿色盒子设置了浮动导致脱离标准流与蓝盒子发生了重叠                                                                                             清除浮动后

<style>
        .box1 {
            float: left;
        }
        .box2 {
            float: left;
        }
       .clearfix {
            clear: both;
        }
 </style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="clearfix"></div>
    <div class="box3"></div>//也可以在box3的属性上加clear,但此时box3的margin失效
</body>
  •  优点：简单，兼容所有浏览器
  •  缺点：增加页面的标签，造成结构混乱　

 

方法2：在父元素上设置overflow:hidden这个属性

　　　　（注意：overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条）

overflow:hidden
  •  优点：简单，代码少，兼容所有浏览器
  •  缺点：不能和position配合使用，内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

 

方法3：给父元素添加伪元素::after（推荐）

.clearfix::after {
            content: "";
            display: block;//表示一个不可见的块级元素
            height: 0;
            clear: both;
        }
  •  优点：符合闭合浮动思想
  •  缺点：代码多，不容易理解

　　　　

 

posted @ 2021-10-12 16:17  打遍天下吴敌手  阅读(122)  评论(0)    收藏  举报