【清除浮动】清除浮动的四种方法详解

最新推荐文章于 2023-07-20 17:15:10 发布

会飞的小黑狗

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量1.2k

点赞数 6

文章标签： css 前端 css3 html

本文链接：https://blog.csdn.net/qq_46036334/article/details/122231379

版权

列举不同的清除浮动的技巧，并指出他们各自适用的使用场景

首先要明白什么是浮动:父元素因为子元素浮动引起的内部高度为0；

为父盒子设置一个boder，在父盒子内部放两个盒子一个big 一个small，在未给big和small设置浮动时，子盒子会默认撑开父盒子
在这里插入图片描述
给内部两个盒子加上float属性或者是开启定位的时候, 父盒子因为子盒子会脱离文档流且没设置高度而变成一条线，这时big和small已经产生了浮动了

清除浮动的方法具体有：

1. 额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；
clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来
清除浮动的方法
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
适用场景：代码量小，不要求性能的时候

不建议使用。

2. BFC方式

首先看下什么是BFC
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。（浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。）
元素要创建BFC需要满足的条件（满足一下任意一个或多个条件即可）：

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

不同条件开启BFC的弊端：

display: table 可能引发响应性问题
overflow: scroll 可能产生多余的滚动条
loat: left 将把元素移至左侧，并被其他元素环绕
overflow: hidden 将裁切溢出元素

优点：简单，方便，可读性高
缺点：开启bfc会产生相应的副作用

3. after伪元素清除浮动（推荐使用）

  .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
       content: "";
       display: block;
       height: 0;
       clear:both;
       visibility: hidden;
   }
   .clearfix{
       *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
   }

<body>
       <div class="fahter clearfix">
           <div class="big">big</div>
           <div class="small">small</div>
           <!--<div class="clear">额外标签法</div>-->
       </div>
       <div class="footer"></div>
   </body>

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
推荐使用

4. before和after双伪元素清除浮动

   .clearfix:after,.clearfix:before{
           content: "";
           display: table;
       }
       .clearfix:after{
           clear: both;
       }
       .clearfix{
           *zoom: 1;
       }

<div class="fahter clearfix">
           <div class="big">big</div>
           <div class="small">small</div>
       </div>
       <div class="footer"></div>