欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css float属性 与 clear属性 的深入了解

程序员文章站 2022-05-29 15:10:32
...

css  float属性深入了解：

一、什么是 CSS Float（浮动）？

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

  

float属性的值：          

属性 描述 值 CSS
float 指定一个盒子（元素）是否可以浮动。 left
right
none
inherit		 1


二、Float（浮动）应用场景

        ①Float  往往是用于图像，就像是办公软件word中的文字坏绕图片的方式设置

        ②float  布局时一样非常有用。


     图片浮动应用实例：

    实例：图片浮动在左边，文字环绕图片    

<!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>
    img {
      float: left;
    }
  </style>
</head>

<body>

  <div style="width: 300px;border: 1px solid black;">
    <img src="http://www.runoob.com/images/klematis_small.jpg" alt="tu1" />
    <p>这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵
    </p>
  </div>
</body>

</html>
结果展示：
css float属性 与 clear属性 的深入了解
布局应用实例： 
通过浮动设置，让文档脱离正常的标准流。设置了浮动的元素可以紧跟上上一个设置了浮动的元素后面，不再自成一行。
<!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>
</head>
<style>
  body,
  p {
    padding: 0;
    margin: 0;
  }

  nav {
    width: 100%;
    height: 30px;
    background-color: gray;
  }

  .menu {
    float: left;
    width: 20%;
    height: 300px;
    background-color: blueviolet;
  }

  .banner {
    float: left;
    width: 60%;
    height: 300px;
    background-color: rosybrown;
  }

  .selector {
    float: 20%;
    height: 300px;
    background-color: yellowgreen;
  }
</style>

<body>
  <nav>导航导航区域</nav>
  <div class="menu">菜单菜单区域</div>
  <div class="banner">轮播轮播区域</div>
  <div class="selector">查询查询区域</div>
</body>

</html>
结果展示：
css float属性 与 clear属性 的深入了解
三、Float（浮动） 产生的塌陷问题
   由于浮动是脱离正常文档流的，写在这些浮动元素后面的正常文档流中的元素，会被浮动的元素覆盖，如下。

   给normal div设置的高度是320px；但是只看到其中20px的高度，另外的300px高度被上面的浮动元素覆盖了。

   css float属性 与 clear属性 的深入了解

实际上，normal  div 的区域如下空色框所示：
css float属性 与 clear属性 的深入了解

这个就是塌陷问题，在我们编辑html页面的时候，需要把这些浮动产生的塌陷清除掉的。这里就会用到另外一个属性clear。

四、clear 清除 Float（浮动） 产生的塌陷问题。
 如下代码，在浮动元素后面增加一个空元素来清除浮动 

 .clearfloat{
    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>
</head>
<style>
  body,
  p {
    padding: 0;
    margin: 0;
  }

  nav {
    width: 100%;
    height: 30px;
    background-color: gray;
  }

  .menu {
    float: left;
    width: 20%;
    height: 300px;
    background-color: blueviolet;
  }

  .banner {
    float: left;
    width: 60%;
    height: 300px;
    background-color: rosybrown;
  }

  .selector {
    float: left;
    width: 20%;
    height: 300px;
    background-color: yellowgreen;
  }

  .clearfloat {
    clear: both;
  }

  .normal {
    width: 50%;
    height: 320px;
    border: 1px dashed green;
    background: red;
  }
</style>

<body>
  <nav>导航导航区域</nav>
  <div class="menu">菜单菜单区域</div>
  <div class="banner">轮播轮播区域</div>
  <div class="selector">查询查询区域</div>
  <div class="clearfloat"></div>
  <div class="normal">这里是正常的文档，没有设置浮动，没有浮动，没有浮动！</div>
</body>

</html>

结果展示：

清除浮动之后，normal div就有自己的正常空间了。

css float属性 与 clear属性 的深入了解




五、clear 属性的深入学习。
链接：
相关标签： float css3 布局 清除浮动

上一篇： CSS3的transition属性

下一篇： 多大个事呀？

推荐阅读