CSS基础: 浮动以及清除浮动

最新推荐文章于 2023-06-03 15:21:41 发布

小猪弟

最新推荐文章于 2023-06-03 15:21:41 发布

阅读量578

点赞数 1

分类专栏： CSS 文章标签： css 浮动清除浮动 clear 伪元素

本文链接：https://blog.csdn.net/u011863822/article/details/123283355

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的浮动布局，包括标准流、浮动的原理与作用，以及浮动元素的特性，如脱离标准流、顶端对齐和内块元素特性。同时，文章讨论了浮动带来的问题及解决办法，如浮动元素对父级高度的影响以及四种清除浮动的方法：额外标签法、overflow属性、伪元素法。这些概念对于理解和使用CSS布局至关重要。

摘要由CSDN通过智能技术生成

其实理解浮动之前，需要首先了解网页布局的三种方式。

网页布局的本质就是：通过CSS来摆放盒子，把盒子摆放到相应的位置。

而CSS提供的三种传统布局方式，简单的说就是盒子如何进行排列顺序。

普通流（标准流）

所谓的标准流：就是按照规定号的默认方式排列。
- 块级元素回独占一行，由上而下排。常用的元素：div，hr，p，h1-h6,ul,ol.dl等等
- 行内元素会按照顺序，从左到右排列，碰到父类元素边缘会自动换行。常用元素：span ， a 等
浮动：很多时候很多布局，标准流无法完成，这个就需要浮动完成布局了，布局可以修改标准流的默认排列方式，比如让块级元素横向排列等。也是本篇主要聊的内容。
定位：这个后面也会聊，这里简单理解就是为某些标签之间定义位置，忽视标签默认排序的规则。

浮动是什么

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包括块或另一个浮动框的边缘。

格式如下：

float: none | left | right

none：设置元素不浮动
left：设置元素浮在左边
right：设置元素浮在右边

其实如果单独看定义或者文字解释说实话我也懵逼，还是老规矩看演示。

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  .f1{

   height: 200px;
   background-color: #4a90e2;
  }
  .f2{

   height: 200px;
   background-color: #4a90e2;
  }
  .f1_s1 {
   width: 40px;
   height: 40px;
   background-color:#f86262;
  }
  .f1_s2{
   width: 40px;
   height: 40px;
   background-color:#333333;
  }

  .f2_s1 {
  width: 40px;
   height: 40px;
   background-color:#f86262;
   float: left;
  }
  .f2_s2{
   width: 40px;
   height: 40px;
   background-color:#333333;
   float: left;
  }
  .f2_s3 {
  width: 40px;
   height: 40px;
   background-color:#f86262;
   float: right;
  }

 </style>
</head>
<body>

<div class="f1">

 <div class="f1_s1"></div>
 <div class="f1_s2"></div>


</div>

<hr/>

<div class="f2">

 <div class="f2_s1"></div>
 <div class="f2_s2"></div>
 <div class="f2_s3"></div>


</div>

</body>
</html>

在这里插入图片描述

当然如果超出父类的宽度也会自动换行

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  .f1{

   height: 200px;
   background-color: #4a90e2;
  }
  .f2{

   height: 200px;
   background-color: #4a90e2;
  }
  .f1_s1 {
   width: 40px;
   height: 40px;
   background-color:#f86262;
  }
  .f1_s2{
   width: 40px;
   height: 40px;
   background-color:#333333;
  }

  .f2_s1 {
   width: 50%;
   height: 40px;
   background-color:#f86262;
   float: left;
  }
  .f2_s2{
   width: 50%;
   height: 50px;
   background-color:#333333;
   float: left;
  }
  .f2_s3 {
   width: 50%;
   height: 40px;
   background-color:#f86262;
   float: left;
  }
  .f2_s4{
   width: 50%;
   height: 50px;
   background-color:#333333;
   float: left;
  }
 </style>
</head>
<body>

<div class="f1">

 <div class="f1_s1"></div>
 <div class="f1_s2"></div>


</div>

<hr/>

<div class="f2">

 <div class="f2_s1"></div>
 <div class="f2_s2"></div>
 <div class="f2_s3"></div>
 <div class="f2_s4"></div>

</div>

</body>
</html>

在这里插入图片描述

浮动特性

浮动使用还还有很多特征，但是目前我们主要掌握三个：

1：浮动元素会脱离标准流（脱标）
2：浮动的元素会一行内显示并且元素顶部对齐。
3：添加浮动的元素具有行内元素的特性。

脱标

设置了浮动的元素最主要的特征就是脱标，到那时如果理解这个呢？

脱离标准普通流的控制（浮）移动到指定位置（动）。
浮动的盒子不再保留原先的位置。

演示：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  .f1,.f2{

   height: 200px;
   background-color: #4a90e2;
  }

  .f1_s1 {
   width: 40px;
   height: 40px;
   background-color:#f86262;
   float: left;
  }
  .f1_s2{
   width: 100px;
   height: 100px;
   background-color:#333333;
  }

  .f2_s1 {
   width: 40px;
   height: 40px;
   background-color:#d10000;
  }
   .f2_s2 {
   width: 40px;
   height: 40px;
   background-color:#f86262;
   float: left;
  }
  .f2_s3{
   width: 100px;
   height: 100px;
   background-color:#333333;
  }
 </style>
</head>
<body>
<div class="f1">
 <div class="f1_s1"></div>
 <div class="f1_s2"></div>
</div>
<hr/>
<div class="f2">
 <div class="f2_s1"></div>
 <div class="f2_s2"></div>
  <div class="f2_s3"></div>
</div>

</body>
</html>

在这里插入图片描述

如果没得理论上理解呢，可以理解为是否用float属性后，可以看出将这个元素和原来页面变成了两层，而float浮在原来位置的上面，切不会占位置，但是又要注意一点，那就是float属性只会影响后面的，而前面的却不会影响，不会浮在前面非float属性的元素上面。

顶端对齐

都是float属性的启动的话，默认都是顶端对齐，除非父类横向无法容下，其实这个效果前面演示也体现了。

在这里插入图片描述

而且浮动的元素还有一点那就是互相贴靠在一起，中间不会右缝隙的。

添加浮动属性标签就拥有内块元素特性

哪怕是行内元素，只要添加了浮动属性，就拥有了行内元素特性，这个很简单用来演示。

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
   .c1{
   height: 100px;
   background-color:#4a90e2;

  }
  span{
   width: 50px;
   height: 50px;
   background-color: #d10000;
   float: left;
  }
  .c2{
   height: 100px;
   background-color: #f86262;
   float: right;
  }
 </style>
</head>
<body>
<div class="c1"></div>
<span></span>
<div class="c2">test</div>
</body>
</html>

在这里插入图片描述

可以看出行内元素拥有了内块元素的特征，而且块元素也变成了内块元素，毕竟块级元素不设置宽度默认是父类宽度了，变成了内快元素特征：不设置宽度，其宽度是自己拥有内容的宽度。

例子

其实很多时候浮动和标准流一起使用的，而不是单独使用。

简单说就是上下排标准流，左右排序用浮动。

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  *{
   padding: 0px;
   margin: 0px;
  }

  .box1{
   width:1240px;
   height: 460px;
   background-color: #767676;
   margin: 0 auto;

  }

  .b1_r{
   width:234px;
   height: 420px;
   padding: 20px 0px;
   float: left;
   background-color: #f86262;
  }
  .b1_l{
   width:966px;
   height: 420px;
   float: right;
   line-height: 460;
   margin: 20px 0px;
   background-color:#d10000;
  }
  .box2{
   width:1240px;
   height: 628px;
   background-color: #767676;
   margin: 10px auto;
  }
  .b2_r{
   width:234px;
   height: 614px;
   float: left;
   /*margin: 7px 14px 7px 0px ;*/
   margin-top: 7px;
   margin-left: 14px;
   margin-bottom: 7px;
   background-color: forestgreen;
  }

  .b2_l{
   width:990px;
   height: 614px;
   margin:7px 0px;
   background-color: red;
    float: right;


  }
  ul{
   list-style: none;
   text-align: center;
  }
  li{
   width:230px;
   height: 260px;
   margin:32px 10px 10px 0px ;
   background-color: gold;
   float: right;
  }

 </style>
</head>
<body>
<div class="box1">
 <div class="b1_r"></div>
 <div class="b1_l"></div>

</div>

<div class="box2">
 <div class="b2_r"></div>
 <div class="b2_l">
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>

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

在这里插入图片描述

注意：

浮动和标准流的父子搭配，其浮动是根据父盒子进行左右浮动的。
只要子类一个使用浮动，那么其它的兄弟元素也最好也使用浮动，因为后面的兄弟标签的标准流会被遮挡。

清除浮动

前面聊了这样多的浮动的优点，为什么还要清除浮动？

其实在开发过程中很多神话不方便给父级盒子的高度，就像你滑动购物网站的时候，下面是慢慢增长的，所以来说这个父级高度一般不会定义，但是子盒子如果会浮动的话，又不会占有位置，也就意味着无法将父级盒子撑开，所以父级盒子一致高度为0.这样又会影响下面布局。

不取消浮动演示：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  *{
   padding: 0px;
   margin: 0px;
  }

  .box1{
   width:540px;
   background-color: black;
   margin: 0 auto;

  }

  .b1_r{
   width:100px;
   height: 100px;

   float: left;
   background-color: #f86262;
  }
  .b1_l{
   width:100px;
   height: 20px;
     float: left;
   background-color:#d10000;
  }
  .box2{
   width:1240px;
   height: 628px;
   background-color: #767676;
   margin: 10px auto;
  }
 
 </style>
</head>
<body>
<div class="box1">
 <div class="b1_r"></div>
 <div class="b1_l"></div>
</div>

<div class="box2">

 </div>

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

在这里插入图片描述

所以清楚浮动的本质是清楚浮动元素造成的影响。当然如果父盒子本身又高度，就不允许清楚浮动了。

如果没有定义父类盒子的高度，清除浮动之后，父级就会根据浮动的子盒子而检测高度。父级有了高度自然也会影响后面的布局了。

清除浮动常用的又四种方式下面依次了解。

额外标签法（隔墙法）W3C推荐。
父级添加overflow属性
父级添加affter伪元素
父级添加双伪元素

清除方式1 额外标签法（clear）

格式如下：

clear: left | right | both

属性	描述
left	不允许左侧又浮动元素，清除左侧浮动的影响
right	不允许右侧又浮动元素，清除右侧浮动的影响
both	清除左右两侧

注意：一般最常用的是both，因为清除浮动的策略就是：闭合浮动。

演示:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  *{
   padding: 0px;
   margin: 0px;
  }

  .box1{
   width:540px;
   background-color: black;
   margin: 0 auto;

  }

  .b1_r{
   width:100px;
   height: 100px;

   float: left;
   background-color: #f86262;
  }
  .b1_l{
   width:100px;
   height: 20px;
     float: left;
   background-color:#d10000;
  }
  .box2{
   width:1240px;
   height: 628px;
   background-color: #767676;
   margin: 10px auto;
  }
     
 .clear{
  clear: both;
 }
 </style>
</head>
<body>
<div class="box1">
 <div class="b1_r"></div>
 <div class="b1_l"></div>
 <div class="clear"></div>>
</div>
<div class="box2">

 </div>

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

在这里插入图片描述

这样可以看出为什么佳作额外标签法了，就是在后面添加一个元素标签而且这个元素必须是块级元素不然无效，然后使用{clear:both}

这样写优点是通俗易懂，书写方便，但是其缺点也很明显那就是添加了许多无意义的标签，结构化会较差，毕竟一个网页不是只是用一个浮动盒子。

虽然官方推荐，但是开发的时候很多人却不喜欢用。

清除方式2 父级添加overflow

格式如下：

overflow ：visible | hidden | scroll | auto | clip

这个属性是添加到父类标签的。

visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
clip：与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。

不过其属性一般使用hidden，auto或scroll。在清除浮动的说话常用hidden。

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  *{
   padding: 0px;
   margin: 0px;
  }

  .box1{
   overflow: hidden;
   width:540px;
   background-color: black;
   margin: 0 auto;

  }
  .b1_r{
   width:100px;
   height: 100px;

   float: left;
   background-color: #f86262;
  }
  .b1_l{
   width:100px;
   height: 20px;
     float: left;
   background-color:#d10000;
  }
  .box2{
   width:1240px;
   height: 628px;
   background-color: #767676;
   margin: 10px auto;
  }
 </style>
</head>
<body>
<div class="box1">
 <div class="b1_r"></div>
 <div class="b1_l"></div>

</div>

<div class="box2">

 </div>

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

在这里插入图片描述

不过这种用法虽然简单，缺点十无法显示溢出的部分。

清除方式3 ：affer伪元素法

:affer 方式其实额外标签哦的升级版，也是给父类添加。

格式如下：

父类选择器:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    
}
父类选择器{
    /* 兼容ie7 ie8 */
   *zoom:1; 
}

看一下visibility和content属性

在这里插入图片描述

通过看属性可以明白，不过是在要清除浮动效果的后面添加一个空的块级元素。

演示：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  *{
   padding: 0px;
   margin: 0px;
  }

  .box1{
  
   width:540px;
   background-color: black;
   margin: 0 auto;

  }

   .box1:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;

}
  .b1_r{
   width:100px;
   height: 100px;

   float: left;
   background-color: #f86262;
  }
  .b1_l{
   width:100px;
   height: 20px;
     float: left;
   background-color:#d10000;
  }
  .box2{
   width:1240px;
   height: 628px;
   background-color: #767676;
   margin: 10px auto;
  }
 </style>
</head>
<body>
<div class="box1">
 <div class="b1_r"></div>
 <div class="b1_l"></div>

</div>

<div class="box2">

 </div>

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

在这里插入图片描述

这种优点就是没有增加标签，结构更简单，缺点需要照顾低版本浏览器（不过现在很少低版本浏览器），很多大厂都是使用这种方式。

清除方式4 ：双伪元素法

这种方式就是前后增增加伪元素。

格式如下：

父类选择器:before,父类选择器:after{
    content:"";
    display:table;
    
}
父类选择器:after{
    clear:both;
}

父类选择器{
    /* 兼容ie7 ie8 */
   *zoom:1; 
}

直接黏贴能用，不再演示。

这种优点就是没有增加标签，结构更简单，缺点需要照顾低版本浏览器（不过现在很少低版本浏览器），很多大厂都是使用这种方式。

小猪弟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础: 浮动以及清除浮动

其实理解浮动之前，需要首先了解网页布局的三种方式。网页布局的本质就是：通过CSS来摆放盒子，把盒子摆放到相应的位置。而CSS提供的三种传统布局方式，简单的说就是盒子如何进行排列顺序。普通流（标准流）所谓的标准流：就是按照规定号的默认方式排列。块级元素回独占一行，由上而下排。常用的元素：div，hr，p，h1-h6,ul,ol.dl等等行内元素会按照顺序，从左到右排列，碰到父类元素边缘会自动换行。常用元素：span ， a 等浮动：很多时候很多布局，标准流无法完成，这个就需要浮动完成
复制链接

扫一扫