浮动的特性和清除浮动的6种方法及其造成的影响

最新推荐文章于 2022-11-15 21:23:21 发布

今天你有学习吗

最新推荐文章于 2022-11-15 21:23:21 发布

阅读量1.4k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/fyw1789/article/details/124527454

版权

浮动的特性

1.脱离标准流

浮动的元素不占用位置，后面的元素就会占用浮动的那个元素的位置，就像是浮动的那个元素飘起来了

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .one {
        width: 200px;
        height: 100px;
        background-color: pink;
      }
      .two {
        width: 100px;
        height: 100px;
        background-color: rgb(223, 95, 95);
      }
    </style>

    <div class="one"></div>
    <div class="two"></div>

没有设置浮动是这样的，给one设置浮动之后

2.浮动的元素相互贴靠

如果有多个浮动的元素，那么他们会贴靠在一起，如果宽度容不下他们，就会重起一行。

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .one {
        width: 100px;
        height: 100px;
        float: left;
        background-color: rgb(223, 95, 95);
      }
      .two {
        width: 200px;
        height: 200px;
        float: left;
        background-color: pink;
      }
    </style>

    <div class="one"></div>
    <div class="two"></div>

宽度够的情况

宽度不够的情况

3.宽度收缩

在没有设置宽度的情况下，块级元素会占满一整行，但是一旦设置浮动之后，他的宽度就会收缩，变成内容区域的宽度。

如果设置了宽度之后，那他的宽度就是设置的宽度。

清除浮动的方法

清除浮动指的是清除浮动带来的副作用

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
        width: 20px;
        background-color: pink;
        float: left;
      }
    </style>

    <ul class="one">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ul class="two">
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

上面是这样的情况，我们需要是是弄成两行

1.给父元素设置高度

只需要给父级设置一个比浮动子元素高度高的一个高度就行，如果给父元素设置的高度小于浮动子元素的高度，那就还会和上一个浮动元素贴合。

因此，如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

2. clear属性

在实际开发中，父元素的高度能被子元素撑开，所以很多情况下不会给父元素设置高度。

ccs中有个clear属性，定义了元素的那边不允许出现浮动元素。

none

元素不会向下移动清除之前的浮动。

left

元素被向下移动用于清除之前的左浮动。

right

元素被向下移动用于清除之前的右浮动。

both

元素被向下移动用于清除之前的左右浮动。

inline-start

该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。

inline-end

该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

用这种方式清除浮动，会导致margin属性失效

3.隔墙法

隔墙法的核心就是在两个浮动元素之间放一个空的div把两个浮动元素隔开，从而让后面的浮动元素不去追前面的浮动元素

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        height: 30px;
      }
      li {
        list-style: none;
        width: 20px;
        background-color: pink;
        float: left;
      }
      .clearfix {
        clear: both;
      }
    </style>


    <ul class="one">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="clearfix"></div>
    <ul class="two">
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

用这种方法margin不会失效

4.内墙法

正常情况下一个没有高度的父元素下使用浮动，父元素就会没有高（塌陷），内墙法的出现就是为了可以让浮动的元素也可以撑开父元素的高。

    <ul class="one">
      <li>1</li>
      <li>2</li>
      <li>
        <div class="clearfix"></div>
        3
      </li>
    </ul>

    <ul class="two">
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

（css和上面的一样）

我们使用内墙法清除了浮动，并且父元素的高度也被撑起来了，margin 也是正常的。

5.overflow

可以设置父元素的overflow除了初始值（visible）的任何一个值

当给父元素添加了overflow之后，父元素就会形成一个BFC，一块独立的渲染区域，不受外接影响，这样就可以能够清除浮动的副作用。

父元素的高度也被撑开了，margin 也是正常的。

6.伪类清除法

最后要介绍的是当前最流行的清除浮动的方法伪类清除法。

该方法的核心思想就是为父元素设置一个伪元素，其实就是无形的添加了一堵墙，然后在伪元素中设置一系列的属性。

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        height: 30px;
      }
      li {
        list-style: none;
        width: 20px;
        background-color: pink;
        float: left;
      }
      .one::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    </style>


    <ul class="one">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <ul class="two">
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

在上面的代码中，我们为第一个 ul 设置了 after 伪元素，并在伪元素中设置了诸如 clear:both、visibility: hidden 等一系列属性，这实际上就等同于在两个 ul 之间添加了一堵无形的墙。