清除浮动的几种方式

小丁冲鸭！

于 2021-06-03 14:27:09 发布

阅读量326

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/DZY_12/article/details/117515813

版权

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

三栏布局，都使用了浮动，导致父元素高度塌陷，效果如下：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
  </head>
  <style>
    .parent {
      border: 3px #ffaaa7 solid;
    }
    .child {
      height: 300px;
    }
    .child:nth-child(1) {
      width: 200px;
      float: left;
      background-color: #98ddca;
    }
    .child:nth-child(2) {
      background-color:#d5ecc2;
      width: calc(100% - 400px);
      float: left;
    }
    .child:nth-child(3) {
      background-color:#ffd3b4;
      width: 200px;
      float: right;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
    </div>
  </body>
</html>

清除浮动后实现效果：

一、伪元素

相当于加入了一个块级元素，并设置了clear:both

 .parent:after {
      content: '';
      display: block;
      clear: both;
  }

二、clear

可以在想要清除浮动的元素上加clear，在本例子中，由于三个child元素都是浮动，所以要在最后边加个空的div，然后加上clear:both即可

 <div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div style="clear:both"></div>
 </div>

三、父级div定义 overflow:hidden

父元素设置overflow:hidden（除了"visible"之外的任何有效值）后会使父元素形成一个BFC，而BFC的高是包含内部的浮动元素的高的

.parent {
      border: 3px #ffaaa7 solid;
      overflow: hidden;
 }

其实所有能使父元素产生BFC的都能解决该，但是有些会造成额外的问题。

小丁冲鸭！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

清除浮动的几种方式

一、 伪元素

二、clear

三、父级div定义 overflow:hidden

一、伪元素