带你玩转清除浮动

一米五的小王
648 阅读3分钟

清除浮动的方法

简介

在我们开始学习如何清除浮动之前，先来看几个问题：

为什么需要清除浮动？

  • 子元素开启了浮动导致父元素没有高度，从而影响到了下方的布局
  • 浮动的元素脱离了文档流，导致文档流中的元素与浮动元素所在的区域发生折叠

清除浮动的本质是什么？

  • 清除浮动元素脱离标准流所造成的影响

清除浮动的方法：

  • 闭合浮动。只让浮动在父元素内部影响，不影响父元素外面的其他元素
  • 利用创建了BFC元素的特性，隔离浮动元素

① 直接设置父元素高度（不常用）

  • 优点：简单粗暴，方便

  • 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

②额外标签法（不常用）

  • 此方法需要在浮动元素末尾（一定要在末尾，否则浮动可能不会被清标签（一般要求是块级元素）。例如<div style="clear:both"></div>，或者其他标签（如<br/>等）。（clear：both是专门用来清除浮动的样式属性，参数值为both代表周围不允许有浮动对象）

  • 优点：通俗易懂，书写方便

  • 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂（所以实际开发中不常用到）

  • 注意：要求这个新的空标签必须是块级元素或者是<br/>

  <style>
        .father { 
          background-color: #000; 
       } 
        .son1, 
        .son2 { 
          width: 200px; 
          height: 200px;
          background-color: red;
       } 
        .son1 { 
         float: left;
        } 
        .son2 { 
        float: right;
       } 
    </style>
<body>
     <div class="father"> 
        <div class="son1"></div> 
        <div class="son2"></div> 
        <div style="clear: both;">
      </div>
</body>

常规流块盒有个特性就是在自动计算高度的时候会无视浮动元素，所以在上面示例中没如果父元素的末尾没有具有clear属性的块级盒子，最终父元素的高度为0，这种现象称为高度塌陷

361da8b7622ebe5c174ad4a06d6f84a.png 在加上了这个空盒子之后，父元素的自动高度就会算上浮动元素

367f920ae507322030bd510743c4484.png

③after伪元素法(开发中常用）

  • 我们提前在css文件中写好clearfix这个属性，为其添加after伪元素，需要清除浮动的时候只需要为元素添加上clearfix这个类名即可；这其实上就是刚刚那种方法的变形而已，其底层原理是一样的，都是在父元素的后面添加了一个样式为clear:both的块级元素，只不过一个是嵌套在html文档中的标签，另一个是伪类元素罢了

  • 优点：没有添加额外标签，结构简单，项目中使用，直接给标签加类即可清除浮动

  • 缺点：由于低版本浏览器不支持after伪元素，所以具有兼容性问题（除非专门写上样式）

<style>
        .father {
          background-color: skyblue;
        }
      
        .clearfix::after {
          content: '';
          display: block;
          clear: both;
        }
      
        .son1,
        .son2 {
          width: 200px;
          height: 200px;
          background-color: pink;
        }
      
        .son1 {
          float: left;
        }
      
        .son2 {
          float: right;
        }
      </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
      </div>  
</body>

最终和我们预想的效果一样，父元素计算高度的时候会将浮动元素的一起计算进去

367f920ae507322030bd510743c4484.png

④ 给父元素设置overflow : hidden

  • 使用方法直接给父元素设置 overflow : hidden
  • 优点：方便快捷

⑤创建BFC清除浮动（扩展方法）

  • 使用方法：
  1. html标签是BFC盒子
  2. 浮动元素是BFC盒子
  3. 行内块元素是BFC盒子
  4. overflow属性取值不为visible。如：auto、hidden…
  • 本质：这里并没有添加样式为clear：both的伪元素或标签，那么浮动是怎么被清除的呢？要讲清楚这个解决方案的原理，有一个概念始终是绕不过去，那就是块格式化上下文,也就是我们俗称的BFC。

  • 优点：书写简单便捷

  • 缺点：有的值可能会带来副作用，比如，overflow属性的scroll值会导致滚动条始终可见，hidden会使得超出边框部分溢出隐藏等......

avatar
文章
阅读
粉丝