浮动

最新推荐文章于 2023-03-25 16:12:57 发布

boboluotou

最新推荐文章于 2023-03-25 16:12:57 发布

阅读量70

点赞数

分类专栏：前端面试 CSS 文章标签：浮动

本文链接：https://blog.csdn.net/weixin_45798469/article/details/113553132

版权

CSS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端面试

14 篇文章 0 订阅

订阅专栏

文章目录

1什么是浮动
2 怎样就是浮动
3 为什么清除浮动
4 清除浮动方法
4.1 额外标签法

1什么是浮动

浮动最开始出现的意义是为了让文字环绕图片，后来发展着发现浮动可以让多个块级元素并排显示，这样子很方便只需要一个属性。到这里肯定有人会问了，那我把display属性设置为inline-block不也能达到效果，为啥还用浮动。那有没有考虑过我就要这些元素从右往左排列呢哈哈哈，所以浮动可以控制居左还是居右排列。

2 怎样就是浮动

其实想实现浮动很容易，给想让他浮动的元素设置属性float：left/right就可以了，浮动造成的结果就是让设置浮动的元素脱离文档流，达到按方向排成一排的效果，也同时会带来一个问题-------父元素高度塌陷。现在我们按照上述的方法建立一行浮动的元素，代码如下：

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

.box{
    border: 1px solid;
    width: 100%;
  }
.div{
    float: left;
    border: 1px solid;
    width: 100px;
    height: 100px;
   }

得到的效果如下：
在这里插入图片描述

父元素高度塌陷

明显父元素高度没有被撑开，上下边距重合到一起去了。接下来我们来解决下一个问题：

3 为什么清除浮动

这里的清除浮动不是清除已经浮动的元素，而是解决由于浮动所带来的的问题（父元素高度塌陷）来清除浮动。

4 清除浮动方法

4.1 额外标签法

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

<!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>

在这里插入图片描述

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

不建议使用

4.2 父级添加overflow属性

（父元素添加overflow:hidden）（不推荐）
通过触发BFC方式，实现清除浮动

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

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不推荐使用

4.3 使用after伪元素

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

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

4.4 使用before和after双伪元素

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

参考链接1
参考链接2

boboluotou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动

文章目录1什么是浮动2 怎样就是浮动3 为什么清除浮动4 清除浮动方法4.1 额外标签法4.2 父级添加overflow属性4.3 使用after伪元素4.4 使用before和after双伪元素1什么是浮动浮动最开始出现的意义是为了让文字环绕图片，后来发展着发现浮动可以让多个块级元素并排显示，这样子很方便只需要一个属性。到这里肯定有人会问了，那我把display属性设置为inline-block不也能达到效果，为啥还用浮动。那有没有考虑过我就要这些元素从右往左排列呢哈哈哈，所以浮动可以控制居左还是居右
复制链接

扫一扫