【web前端开发】CSS浮动

野性酷女 2023-09-27 15:26 66阅读 0赞

#### 文章目录 ####

*  1.浮动
 *  2.伪元素
 *  3.标准流
 *  4.行内块元素的问题
 *  5.浮动的作用
 *  6.浮动的特点
 *  7.清除浮动
 *   *  方法1:额外标签
     *  方法2:单伪元素
     *  方法3:双伪元素
     *  方法4:overflow

## 1.浮动 ##

> CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能靠左或者靠右。  
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。  
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。  
如果图像是左浮动，下面的文本流将环绕在它右边：

## 2.伪元素 ##

> 伪元素:通过CSS模拟出标签的效果

<table> 
 <thead> 
  <tr> 
   <th>伪元素</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>::before</td> 
   <td>在父元素内容前加一个伪元素</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>在父元素内容最后加一个伪元素</td> 
  </tr> 
 </tbody> 
</table>

1.  `必须要有content属性`
2.  伪元素默认是行内元素

## 3.标准流 ##

*  `块级元素独占一行->垂直布局`
 *  `行内元素/行内块元素 一行可以显示多个 水平布局`

## 4.行内块元素的问题 ##

接下来讲一下行内块元素的会出现的问题:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div{
          
          width: 100px;
          height: 60px;
          display: inline-block;
        }
        .one{
          
          background-color: skyblue;
        }
        .two{
          
          background-color: grey;
        }
      </style>
    </head>
    <body>
      <div class="one">1</div>
      <div class="two">2</div>
    </body>
    </html>

这个是div换行写的效果  
![在这里插入图片描述][80a5d3ca889b430eb327deeb528a9e52.png]  
这个是不换行写的效果  
![在这里插入图片描述][abadf87dcc954a64aae2e9cf0c9d3ff6.png]  
如果想要换行写且要两个盒子之间没有空格,就需要用到浮动

## 5.浮动的作用 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div{
          
          width: 100px;
          height: 60px;
          display: inline-block;
        }
        .one{
          
          background-color: skyblue;
          /*设置浮动*/
          float: left;
        }
        .two{
          
          background-color: grey;
          /*设置浮动*/
          float: left;
        }
      </style>
    </head>
    <body>
      <div class="one">1</div>
      <div class="two">2</div>
    </body>
    </html>

显示效果:  
![在这里插入图片描述][0d61dea922a94100aab7a5d644c1b718.png]

## 6.浮动的特点 ##

`1.浮动会脱离标准流(俗称"脱标"),在标准流中不占位置`

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .one{
          
          width: 100px;
          height: 100px;
          background-color: skyblue;
        }
        .two{
          
          width: 200px;
          height: 200px;
          background-color: grey;
        }
        .three{
          
          width: 300px;
          height: 300px;
          background-color: greenyellow;
        }
      </style>
    </head>
    <body>
    <div class="one">111</div>
    <div class="two">222</div>
    <div class="three">333</div>
    </body>
    </html>

![在这里插入图片描述][4838ed158e2747a3b9f8263d8f49e5aa.png]  
这是不加浮动的显示效果,下面看看加了浮动的  
在上面代码的基础上,给one这个类选择器加一个浮动

.one{
          width: 100px;
          height: 100px;
          background-color: skyblue;
          /*增加浮动*/
          float: left;
        }

效果:  
![在这里插入图片描述][936ec71774f34589aa7217e7e60b6e5b.png]  
可以看到第二个跑到了第一个div的位置,就这就是浮动的脱标现象,相当于是飞起来了.  
但是蓝色的div盒子并没有把灰色div盒子的内容遮盖掉,虽然是脱标,但算是一种半脱标.  
`浮动的元素比标准流多半个级别,可以覆盖标准流中的元素` 这也是浮动的第二个特点

此时如果再给第二个div增加浮动,会是什么效果呢  
示例:

.two{
          width: 200px;
          height: 200px;
          background-color: grey;
          /*增加浮动*/
          float: left;
        }

效果  
![在这里插入图片描述][b307192f667f41d28afe9cf0a6527dee.png]  
第二个div是紧靠着第一个div对齐的,`浮动找浮动下一个浮动元素会在上一个元素的左右浮动 ->浮动的第三个特点`  
浮动的元素都是靠着最上面对齐的,这也叫`顶对齐` 如果不想顶对齐,也可以给盒子增加外边距实现不对齐

浮动的显示效果:

*  一行可以显示多个
 *  可以设置宽高

`浮动后的元素具有行内块元素的特点,但是浮动的元素之间换行写不会有缝隙`

## 7.清除浮动 ##

这里的清除浮动并不是把浮动的代码给清除了,而是其它元素会受到浮动的影响,我们不想让其它元素受到浮动的影响,因此我们需要清除浮动  
示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .one{
          
          width: 500px;
          height: 300px;
          background-color: pink;
          margin: 0 auto;
        }
        .two{
          
          width: 100%;
          height: 100px;
          background-color: greenyellow;
        }
        .three{
          
          /*浮动*/
          float: left;
          width: 300px;
          height: 300px;
          background-color: skyblue;
          margin: 0 auto;
        } 
      </style>
    </head>
    <body>
    <div class="one">
      <div class="three"></div>
    </div>
    <div class="two"></div>
    </body>
    </html>

效果:  
![在这里插入图片描述][466369c23d9d4ed7afe27eec105e37a2.png]  
如果我想要的是绿色的盒子就在蓝色的盒子下面这个位置显示  
那么如果将粉色div的高度去除掉,那么就出现以下效果:  
![在这里插入图片描述][9da042fcfd7e49c18e9610aed11449ef.png]  
此时按下F12检查,我们发现第一个div的长和宽为500 \* 0  
![在这里插入图片描述][fa3e5cbb72774ddfb2b3fa1da792a4d1.png]  
蓝色的div已经脱标了.因此绿色的div就跑到上面去了.这就是受到了浮动的影响

> `父子级关系,父元素没有高度,子元素浮动,后面的标准流盒子就会受到影响`  
> `最简单的办法就是给父元素设置高度,但是通常情况下,不会这么写`

下面给大家介绍其它清除浮动的方法

### 方法1:额外标签 ###

> 方法有两步:`1.给父元素内容的最后加一个块级元素 2.给增加的这一个块级元素增加设置: clear:both`

示例:  
在刚才的代码上进行修改

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .one{
          
          width: 500px;
          /*height: 300px;*/
          background-color: pink;
          margin: 0 auto;
        }
        .two{
          
          width: 100%;
          height: 100px;
          background-color: greenyellow;
        }
        .three{
          
          float: left;
          width: 300px;
          height: 300px;
          background-color: skyblue;
        }
        /*清除浮动*/
        .clearfix{
          
          clear: both;
        }
      </style>
    </head>
    <body>
    <div class="one">
      <div class="three"></div>
      
      <div class="clearfix"></div>
    </div>
    <div class="two"></div>
    </body>
    </html>

效果:  
![在这里插入图片描述][b3c8578c1e0b4e1bbb353bf9937b01f9.png]  
这个方法不止清除了浮动,也让粉色重新显示出来了  
![在这里插入图片描述][49da1d148e2f4ab19568bd9451803937.png]  
这种方法是增加的行内元素,把原来的盒子撑开了  
`缺点: 增加了额外的元素,会使HTML结构变得复杂`

### 方法2:单伪元素 ###

这个方法是**使伪元素代替了额外的标签**  
基本写法:

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

补充写法(为了**兼容性**):

.clearfix::after{
          content: '';
          display: block;
          clear: both;
    	  /*在网页中看不到伪元素*/
          height: 0;
          visibility: hidden;
        }

直接让父元素调用这个伪类选择器即可  
原理是和额外标签法是一样的  
![在这里插入图片描述][6372867c53264384875cce2b5a137f84.png]

### 方法3:双伪元素 ###

与单伪元素写法类似  
写法:

.clearfix::after,
        .clearfix::before{
          content: '';
          display: table;
        }
    	/*真正清除浮动的标签*/
        .clearfix::after{
          clear: both;
        }

`这里的 .clearfix::before 是为了解决外边距塌陷问题`  
然后让父类引用伪类选择器即可  
单伪元素和双伪元素这两种清除浮动的写法,不需要背,直接拿来用即可

### 方法4:overflow ###

清除浮动还有一种特别简单的写法: `直接给父元素设置 overflow:hidden`  
这里就不跟大家演示了,很简单.可以自行去尝试一下

> 感谢你的观看!希望这篇文章能帮到你!  
> 专栏:[《web前端开发》][web] 在不断更新中,欢迎订阅!  
> “愿与君共勉,携手共进!”  
> ![在这里插入图片描述][8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]

[80a5d3ca889b430eb327deeb528a9e52.png]: https://img-blog.csdnimg.cn/80a5d3ca889b430eb327deeb528a9e52.png
[abadf87dcc954a64aae2e9cf0c9d3ff6.png]: https://img-blog.csdnimg.cn/abadf87dcc954a64aae2e9cf0c9d3ff6.png
[0d61dea922a94100aab7a5d644c1b718.png]: https://img-blog.csdnimg.cn/0d61dea922a94100aab7a5d644c1b718.png
[4838ed158e2747a3b9f8263d8f49e5aa.png]: https://img-blog.csdnimg.cn/4838ed158e2747a3b9f8263d8f49e5aa.png
[936ec71774f34589aa7217e7e60b6e5b.png]: https://img-blog.csdnimg.cn/936ec71774f34589aa7217e7e60b6e5b.png
[b307192f667f41d28afe9cf0a6527dee.png]: https://img-blog.csdnimg.cn/b307192f667f41d28afe9cf0a6527dee.png
[466369c23d9d4ed7afe27eec105e37a2.png]: https://img-blog.csdnimg.cn/466369c23d9d4ed7afe27eec105e37a2.png
[9da042fcfd7e49c18e9610aed11449ef.png]: https://img-blog.csdnimg.cn/9da042fcfd7e49c18e9610aed11449ef.png
[fa3e5cbb72774ddfb2b3fa1da792a4d1.png]: https://img-blog.csdnimg.cn/fa3e5cbb72774ddfb2b3fa1da792a4d1.png
[b3c8578c1e0b4e1bbb353bf9937b01f9.png]: https://img-blog.csdnimg.cn/b3c8578c1e0b4e1bbb353bf9937b01f9.png
[49da1d148e2f4ab19568bd9451803937.png]: https://img-blog.csdnimg.cn/49da1d148e2f4ab19568bd9451803937.png
[6372867c53264384875cce2b5a137f84.png]: https://img-blog.csdnimg.cn/6372867c53264384875cce2b5a137f84.png
[web]: https://mp.csdn.net/mp_blog/manage/column/columnManage/12118781
[8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]: https://img-blog.csdnimg.cn/8fbf2a7f2d0e4db782e58035677a303d.png#pic_center