浮动布局的优点？有什么缺点？清除浮动有哪些方式？

最新推荐文章于 2024-07-12 16:38:52 发布

Crush-lph

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量503

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_45886500/article/details/119949093

版权

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

浮动布局的优点？有什么缺点？清除浮动有哪些方式？

浮动布局简介:
当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。
元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    /* .clear{
        clear:both;
    } */
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <!-- <div class="clear">额外标签法</div> -->
    </div>
    <div class="footer"></div>
</body>
</html>

优点
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题
缺点
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清除浮动的方式

1、添加额外标签 (不推荐)

在最后一个浮动标签之后添加一个额外的元素，给其添加css属性clear:both;

 <div class="fahter">
     <div class="big">big</div>
     <div class="small">small</div>
     <div class="clear">额外标签法</div>
 </div>

    .clear{
        clear:both;
    }

缺点: 语义化差

2、父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

   .fahter{
       width: 400px;
       border: 1px solid deeppink;
       overflow:hidden
   }

缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 例如添加一个长英文文本

3、给父元素设置高度 (不推荐)

缺点:添加新元素的时候需要重新计算高度

4、给父元素添加inline-block属性 (不推荐)

缺点:会使margin:auto 失效

5、使用after伪元素清除浮动（推荐使用）

当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用，所有需要清除浮动的父元素添加一个相同的class名即可。

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

6、使用before和after双伪元素清除浮动（推荐使用）

优点与after伪类一样

    .clearfix::after,
    .clearfix::before {
      content: "";
      display:table;
    }

    .clearfix::after {
      clear: both;
    }

伪类清除浮动的缺点是不兼容ie6-7
解决方法

  .clearfix{
      *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

Crush-lph

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
浮动布局的优点？有什么缺点？清除浮动有哪些方式？

浮动布局的优点？有什么缺点？清除浮动有哪些方式？浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid
复制链接

扫一扫