"超实用！5种清除浮动的方法，让你的网页排版更专业"

故乡之夜
198 阅读5分钟

前沿

什么是浮动？标准的回答是“元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程”，但确切来说不是清除浮动本身，而是清除浮动所造成的影响.解决了父级元素因为子级元素浮动造成的内部高度为0的影响。那浮动是怎么产生的呢？又要这么清除浮动呢？

1.浮动的特点

1.文字环绕！

利用float属性设置元素浮动使文字环绕在元素周围，语法为“被环绕的元素{float:浮动样式;}”；

HTML代码基本代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.pic{
        width: 200px;
        height: 200px;
        float: left;
    }
.pic img{
    width: 100%;
}

</style>
<body>
    <div class="pic">
        <img src="https://img.ddtouxiang.com/upload/touxiang/20230324/0324195229471.jpeg" alt="">
    </div>
    <div class="text">
        寂静的森林里，树木窃窃私语，萤火虫的光不再温暖。鹅卵石铺就的小路上布满了多少人的脚印？
        我在这里轻轻吟颂着温暖的童话。　　带着怀表的兔子发着光，领着美丽的爱丽丝，进入神秘的扑克牌仙境
        ，奇妙的经历只是一个梦而已，一切都会结束。　　

    </div>
</body>
</html>

效果图

image.png

2.浮动可以让块级元素同行显示。

默认元素的布局是按照普通流（文档流/标准流），也就是所有标签按照规定好的方式排列：块级元素单独占一行，行内/行内块一行排列。

HTML代码基本代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        
    }
    .item1{
        background-color: lightblue;
        float: left;
    }
    .item2{
        background-color: lightgreen;
        float: left;
    }
    .item3{
        background-color: lightyellow;
        float: left;
    }
</style>
<body>
    <div class="item1">111</div>
    <div class="item2">222</div>
    <div class="item3">333</div>
</body>
</html>

效果图

image.png

3.元素会脱离文档流！父容器高度塌陷!

当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。 父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，

HTML代码基本代码(没有浮动前)

    <div class="div1">div1</div>
    <div class="div2">div2</div>
    </div>

.div1{height: 100px; width: 100px; background: green;}
.div2{height: 100px; width: 100px; background: blue;}

image.png

当我们让div1和div浮动之后:

   .div1{height: 100px; width: 100px; background: green; float: left;}

.   div2{height: 100px; width: 100px; background: blue; float: right;}

image.png

我们可以发现，当子元素全都浮动后，父元素box的高度变为了0只剩下了边框，这就是box发生了高度塌陷。

4.让行内元素可以设置宽高。

行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width:600px; height:600px; background-color: #d03642;margin:50px auto;text-align: center">
    <!--左浮动-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen;float: left">左浮动</span>
    <!--未设置浮动（父级设置了text-align:center）-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen">无浮动</span>
    <!--右浮动-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen;float: right;">右浮动</span>
</div>
</body>
</html>

效果图

image.png

5.浮动元素可以设置margin 但是不能设置 margin：0 auto；

argin:'0 auto'; 只对块元素起作用，还要设置width属性。

浮动元素是半脱离文档留，不同与定位是完全脱离文档流，脱离文档流后，性质几乎等同于display：inline-black，等同于行内块元素。

2.清楚浮动

1.直接设置父容器高度。(一般情况下是不用这个方法的)

  1. 优势：简单
  2. 弊端：必须要知道父元素高度是多少
  3. 宽度定的太死，导致不同尺寸的设备大小不一

2.给下面受影响的容器加clear：both；。(一般情况下是不用这个方法的)

给谁清除浮动就在它后面添加一个额外标签，尽管它通俗易懂，但是会多许多无意义的标签，使的父元素和子元素相关联，结构化也会变差，

  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

3.增加子容器，在子容器身上做清除浮动。(一般情况下是不用这个方法的)

优势：代码量少 容易掌握 简单易懂

弊端：会添加许多无意义的空标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100vw;
        height: 200px;
        background-color:orchid;
        
    }
    span{
        width: 100px;
        height: 100px;
        background: lemonchiffon;
        float: left;
        
    }
</style>
<body>
    <div class="box">
        <span>1</span>

    </div>
</body>
</html>

4.借助bfc容器的特点 抵消浮动的负面影响。(一般情况下是不用这个方法的)

.父元素overflow的属性值设置为hidden、scroll或者auto。

弊端：如果有内容要溢出显示，也会被一同隐藏。如果需要做一个二级菜单，那么子菜单就会被overflow:hidden 所隐藏

5.伪元素清除浮动(一般选择用这种方法)

after 选择器向选定的元素之后插入内容 content:""; 生成内容为空 display: block; 生成的元素以块级元素显示, clear:both; 清除前面元素浮动带来的影响 相对于空标签闭合浮动的方法,高度和宽度设置为零，目的是防止content里面含有内容，导致页面出现无关内容，而visibility:hidden是对content的内容进行隐藏。

优势：不破坏文档结构，没有副作用

弊端：代码量多

        xx::after{
                    content: '';
                    clear: both;
                    display: block;
                    height:0;
                    width: 0;
                    visibility:hidden
                    }

总结

好啦，以上就是浮动的五种特点和五种清除浮动的方法，最容易混淆的就是浮动的第五种的特点，最常用清浮动也就第五种方法，这就是个人的一点总结和卓见，有何疑问可留言评论和探讨！！！

avatar
文章
阅读
粉丝