clearfix详解

最新推荐文章于 2023-10-21 21:46:54 发布

无悟饭空

最新推荐文章于 2023-10-21 21:46:54 发布

阅读量2k

点赞数 3

分类专栏： html和css

本文链接：https://blog.csdn.net/weixin_43269800/article/details/103812943

版权

html和css 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

clear

clear属性可以用于清除元素周围的浮动对元素的影响。
也就是元素不会因为上方出现了浮动元素而改变位置。
• 可选值：
– left：忽略元素左侧浮动影响
– right：忽略元素右侧浮动影响
– both：忽略元素两边浮动影响
– none：不忽略浮动，默认值

清楚浮动方案

1、可以在父元素的底部，添加一个空白的块级元素，并且给该元素设置clear：both；（兼容各种浏览器，w3c推荐）

<style>
    .parent {
      border: 1px solid red;
    }
    .child {
      float: left;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .clear {
      clear: both;
    }
  </style>
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="clear"></div>
  </div>
</body>

2、给父元素添加after伪元素（也就是在父元素的底部添加元素）

<style>
.parent:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

3、给父元素添加清楚浮动通用类clearfix

.clearfix:after {
      content: "";
      display: block;
      clear: both;
}
.clearfix {
  zoom: 1; /*兼容ie6*/
}
<body>
  <div class="parent clearfix">
    <div class="child"></div>
  </div>
</body>

总结：仔细观察以上3种方式，是逐步演变的过程。万变不离其宗，原理还是最初w3c推荐的方法，后面只是逐步完善的。
1、从底部添加一个元素，并清除该元素两边浮动。
2、利用创建伪元素，并清除该伪元素两边的浮动。
3、编写一个通用类名：clearfix。给父元素添加该类名即可。

父子外边距重叠

当子元素和父元素重叠时，给子元素添加外边距，会促发父元素当给子元素添加margin-top：100px；父元素下来了。本意是想增加子元素与父元素的margin-top
代码：

.box1 {
      width: 100px;
      height: 100px;
      margin-top: 100px; /* 给子元素添加上外边距，促发了父元素*/
      background-color: pink;
    }
   <div class="box">
    <div class="box1"></div>
  </div>

解决思路：父元素的前面有其他元素。
只要父元素前面有其他的元素，子元素的margin-top就能生效
只要当前子元素的前面有任何元素，他的margin-top就能生效。

<div class="box">
    a
    <div class="box1"></div>
  </div>

那如果是空标签呢？

  <div class="box">
    <div></div>
    <div class="box1"></div>
  </div>
    <div class="box">
    <span></span>
    <div class="box1"></div>
  </div>
    <div class="box">
    <p></p>
    <div class="box1"></div>
  </div>

经过测试一般的块级元素和内联元素，均无效。而只有table这个块级元素有效。

  <div class="box">
    <table></table>
    <div class="box1"></div>
  </div>

既然可以添加标签，那么我顺利想到了before伪元素。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
    
      width: 300px;
      height: 300px;
      background-color: red;
    }
    .box1 {
      width: 100px;
      height: 100px;
      margin-top: 100px; /* 给子元素添加上外边距，促发了父元素*/
      background-color: pink;
    }
    .box:before {
      content: '';
      display: table;
    }
  </style>
  <body>
  <div class="box">
    <div class="box1"></div>
  </div> 
</body>

完善clearfix

.clearfix:before, .clearfix:after {
      content: '.'; /*这里内容不为空是为了兼容firefox7 之前会生成空格*/
      visibility: hidden;
      display: table;/*table是特殊的块级元素，所以可以替换block*/
      clear: both;
    }
    .clearfix {
      zoom:1; /* 兼容ie: 6;*/
    }

最终，我们明白了.clearfix这个通用类的完美写法。

无悟饭空

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
clearfix详解

clearclear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。• 可选值：– left：忽略元素左侧浮动影响– right：忽略元素右侧浮动影响– both：忽略元素两边浮动影响– none：不忽略浮动，默认值清楚浮动方案1、可以在父元素的底部，添加一个空白的块级元素，并且给该元素设置clear：both；（兼容各种浏览器，w3c...
复制链接

扫一扫