清除浮动

时间：2020-10-29 09:22:17 收藏：0 阅读：30

什么是浮动

在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，
在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。
如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。

浮动使元素脱离文档普通流，漂浮在普通流之上的。
浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。

浮动导致的问题:

浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框不会自动撑高来包裹浮动元素，即所谓的“高度塌陷”。如下图所示

<style>
    #wrapper {
      outline: 2px solid red;
    }

    .float1 {
      float: left;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div id="wrapper" class="clearfix">
    <div class="float1">
      浮动元素</div>
  </div>
</body>

技术图片

怎么清除浮动

给父容器添加after伪类和zoom样式（推荐使用）可以写成公共样式，zoom兼容IE

推荐使用

/* 给父元素设置after元素和zoom样式 ,zoom兼容IE*/
    .clearfix::after {
      content:"";
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
    }
    .clearfix {
      zoom: 1;
    }

技术图片

　　2. 给父元素设置overflow:hidden或者 overflow:auto

不推荐该用法，使用hidden时当内容较多时会被遮挡，使用auto时内容较多会出现滚动条。
通过触发BFC方式，实现清除浮动

/* 
       2. 给父元素设置overflow:hidden或者 overflow:auto 
      (不推荐该用法，使用hidden时当内容较多时会被遮挡，使用auto时内容较多会出现滚动条)
    */
    .clearfix {
      /* overflow: hidden; */
      overflow: auto;
    }

　　3. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

不推荐使用，可能会增加很多空标签，代码冗余
注意点: 在最后一个浮动便签后面

 /* 添加空标签，并设置clear:both的样式 */
    .clearfix {
      clear: both;
    }

 <div id="wrapper" class="clearfix">
    <div class="float1">
      浮动元素
    </div>
    <div class="clearfix"></div>
  </div>

　　4. 给父容器设置高度（不推荐，当浮动元素和设置的容器高度不一样时会出现问题，适合固定高度布局时使用）

　　5. 让父元素一起浮动（不推荐，可能会影响父元素的兄弟元素和其父元素的排列布局）

　　6. 给父元素设置display:table或者display:inline-block, 触发BFC清除浮动

不推荐使用

 /* 4. 给父元素设置display:table 或者 display:inline-block, 触发BFC */
    .clearfix {
      /* display: table; */
      display: inline-block;
    }

　　7. 使用before和after双伪元素清除浮动

 /* 5. 使用before和after双伪元素清除浮动 */
    .clearfix:after,.clearfix:after {
      content: "";
      display: block;
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }

参考:

https://blog.csdn.net/u013356907/article/details/82778480