辉太郎看前端(清除浮动的几种解决方式)

最新推荐文章于 2022-03-11 17:03:03 发布

辉Gg呀！

最新推荐文章于 2022-03-11 17:03:03 发布

阅读量152

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/m0_50512274/article/details/112489218

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

前言

为什么使用浮动？
为什么要清除浮动？
清楚浮动有几种解决方案？

浮动

-使用浮动是因为在html中有时候会遇到几个块元素并排的问题或行元素需要设置宽高或内外边距时，所以就会使用到浮动。

浮动案例

<body>
  <ul>
    <li class="list"></li>
    <li class="list"></li>
    <li class="list"></li>
    <li class="clear"></li>
  </ul>
</body>

理想效果

在这里插入图片描述

布局效果

在这里插入图片描述

浮动后的效果

在这里插入图片描述

为什么清除浮动

由上图可见，在浮动后父元素高度没有了，为了解决父元素高度塌陷的问题，我们就要用到清除浮动。

清除由于子元素浮动带来父元素高度塌陷的影响。
同级元素浮动后，会脱离文档流，对布局造成了影响，也要用到清除浮动。

同级元素浮动后造成的布局影响

在这里插入图片描述

解决方案

给后边的兄弟元素添加clear:left;。

解决方案

添加冗余元素并为其设置为clear:both；

ul{
     border: solid blue 2px;
     margin-top: 20px;
    }
    .list{
      width: 100px;
      height: 100px;
      margin: 10px 20px;
      float: left;
      border: 2px solid #ccc;
      background-color: rgb(233, 15, 15);
    }
    .clear{
      clear: both;
      overflow: hidden;
    }

缺点：要在页面添加许多冗余元素，太过于麻烦，而且不符合语义化。

采用伪元素(给父元素添加after伪元素)

//父级
ul {
      border: solid blue 2px;
      margin-top: 20px;
    }
     //父级类名，伪元素
    .box:after {
      content: "";
      display: block;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }

    .list {
      width: 100px;
      height: 100px;
      margin: 10px 20px;
      float: left;
      border: 2px solid #ccc;
      background-color: rgb(233, 15, 15);
    }

缺点：IE6/IE7不识别:after伪元素，存在兼容性问题

给父元素固定高度

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。

总结

float的属性left right none inherit
clear的属性left right both none inherit

初出茅庐，请大佬多多关照。

辉Gg呀！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
辉太郎看前端(清除浮动的几种解决方式)

前言为什么使用浮动？为什么要清除浮动？清楚浮动有几种解决方案？浮动-使用浮动是因为在html中有时候会遇到几个块元素并排的问题，所以就会使用到浮动。浮动案例<body> <ul> <li class="list"></li> <li class="list"></li> <li class="list"></li> <li class="
复制链接

扫一扫