元素浮动的后果及解决办法

最新推荐文章于 2022-12-04 10:39:22 发布

code enthusiasts

最新推荐文章于 2022-12-04 10:39:22 发布

阅读量593

点赞数

分类专栏： html总结+css总结+JS总结文章标签： html5 css3

本文链接：https://blog.csdn.net/girllan/article/details/118418468

版权

html总结+css总结+JS总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

浮动产生的后果及清除浮动

浮动

通过float设置浮动，向左浮动float:left,向右浮动float:right

浮动产生的不好的后果

CSS官方文档解释：元素设置浮动后，元素脱离文档流，在当前向左或向右对齐，如果当前行没有足够的空间容纳该浮动元素，会自动的往下一行排列，直到有足够的空间。浮动元素碰到它的边框或浮动元素的边框停靠。

下面分别来看对行内元素和块级元素产生的影响

行内元素

假设一个div(box1)内包含一个块元素div(box2)和行内元素span，在未对块级子元素(box2)设置浮动时，该块级子元素(box2)会独立占一行，占据一定的高度(在设置了高度的前提下),后面的span 会向下重新占据高度。但是一旦给块级子元素box2设置向左的浮动，那么块级子元素将不再独立占据一行，行内块元素会跟在box2后面排列。
具体看代码和效果图。

未给box1设置浮动前

代码：

  <div style=" height:500px;background-color:#0f0" class="box1"> 
    <div  style="width:100px; height:200px;background-color:#f00;  display:-inline-block" id="box2"></div>      
    <span  style="background-color:#ff0; line-height:35px;" >
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离  
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动.
    </span>
    </div>

在这里插入图片描述

box2设置浮动后

代码：

<div style=" height:500px;background-color:#0f0" class="box1"> 
    <div   id="box2" style=" float:left;width:100px; height:200px;background-color:#f00;display:-inline-block"></div>      
    <span  style="background-color:#ff0; line-height:35px;" >
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离  
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动.
    </span>
    </div>

在这里插入图片描述

块级元素

假设div(box1)中后两个子元素，一个是div(box2),另外一个是div(box3)，显而易见的，在给其中任何一个字元素设置浮动的时候，box2与box3是上下排列的。但是一旦其中一个设置了浮动，情况就不一样了。
下面我们来看看，当box3中的内容为文本内容时，

代码：

  <div style=" height:500px;background-color:#0f0" class="box1">
    <div id="box2" style="float:left; width:100px; height:200px;background-color:#f00;display:-inline-block"></div>
    <div id="box3" style="background-color:#ff0; line-height:35px;">
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离浮动元素脱离文档流，向左或是向右浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离,浮动，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留,浮动元素脱离
      浮动元素脱离文档流，向左或是向右浮动.
    </div>
  </div>
  </div>

在这里插入图片描述
当box3里面的不是内容时，

代码：

  <div style=" height:500px;background-color:#0f0" class="box1">
    <div id="box2" style="float:left; width:100px; height:200px;background-color:#f00;display:-inline-block"></div>
    <div id="box3" style="background-color:#ff0;width:200px; height:300px;">
    </div>
  </div>
  </div>

  </div>

在这里插入图片描述

浮动带来的好的一面

解决上边距重叠的问题及可以横向排列

我们可以从下面代码及图中看到，当未给box3设置浮动的时候，此时box3的上边距是与box1是重叠的，即给box3设置margin-top:100px时看到的效果是box1整体往下移了100px，而给box2开启浮动后，解决了此上边距重叠的问题。

代码：

  <div style=" height:500px;background-color:#0f0" class="box1">
    <div id="box2" style="float:left;margin-top:100px; width:100px; height:200px;background-color:#f00;display:-inline-block"></div>
    <div id="box3" style="margin-top:100px;background-color:#ff0;width:200px; height:300px;">
    </div>
  </div>
  </div>

在这里插入图片描述

消除浮动带来的不好后果

父级元素定义高度

实现原理：

直接给父级元素定义height,解决父级没有高度问题。
缺点：布局必须高度固定，且高度必须精确，否则一旦子元素高出父级，会导致布局问题。
结论：一般不建议使用

额外标签法(clear:both)

实现原理：

在需要清除浮动的元素里边添加一个div,利用clear:both来清楚，让父级获取到高度。
缺点：增加额外元素
总结：不太推荐使用，多了很多无意义的标签，页面复杂以后，影响性能。

代码：

<!DOCTYPE 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>解决浮动导致的页面非正常显示</title>
  <style>
    .box1 {
      border: 2px solid rgb(116, 44, 44);
    }

    #box2 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
      /* 解决代码 */
    .clearfloat{
      clear:both;
    }
    #box3 {
      float: right;
      background-color: #ff0;
      width: 100px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div id="box2"></div>
    <div id="box3"></div>
      /* 解决代码 */
    <div class="clearfloat"></div>
  </div>
  </div>

  </div>
</body>

</html>

在这里插入图片描述

父级元素定义伪元素::after和zoom

实现原理：

实现思路和额外标签法类似，但是增加了zoom代码解决IE6,IE7的浮动问题
建议：推荐使用，定义成公共样式

代码：

<!DOCTYPE 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>解决浮动导致的页面非正常显示</title>
  <style>
    .box1 {
      border: 2px solid rgb(116, 44, 44);
    }
    /* 解决代码 */
    .clearfloat::after{
      display:block;
      clear:both;
      content:"";
      visibility: hidden; 
      height:0px;
    }
    .clearfloat{
      zoom:1
    }
    #box2 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
    #box3 {
      float: right;
      background-color: #ff0;
      width: 100px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box1 clearfloat">
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
  </div>

  </div>
</body>

</html>

图的效果和上面一样。

父级元素定义overflow:hidden或 overflow:auto,触发BFC

实现原理：

定义元素宽度，或者使用zoom:1代码，再使用overflow：hidden的时候，浏览器自动获取浮动区域的高度
缺点：不能使用position定位，同时可能会对内容进行裁剪
建议：不方便使用position,所以不大建议使用

代码：

<!DOCTYPE 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>解决浮动导致的页面非正常显示</title>
  <style>
    .box1 {
      border: 2px solid rgb(116, 44, 44);
    }
    /* 解决代码 */
    .clearfloat{
      height:200px;
      /* zoom:1; */
      /*overflow:hidden;*/
      overflow:auto;
    }
    #box2 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
    #box3 {
      float: right;
      background-color: #ff0;
      width: 100px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box1 clearfloat">
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
  </div>

  </div>
</body>

</html>

父级元素也一起浮动

实现原理：

给父级元素开启浮动。
不推荐使用，因为如果父级还有父级，还是一样的要解决浮动问题。

代码：

<!DOCTYPE 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>解决浮动导致的页面非正常显示</title>
  <style>
    .box1 {
      border: 2px solid rgb(116, 44, 44);
    }
    /* 解决代码 */
    .clearfloat{
      float:left;

    }
    #box2 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
    #box3 {
      float: right;
      background-color: #ff0;
      width: 100px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box1 clearfloat">
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
  </div>

  </div>
</body>

</html>

在这里插入图片描述

code enthusiasts

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素浮动的后果及解决办法

浮动产生的后果及清除浮动浮动通过float设置浮动，向左浮动float:left,向右浮动float:right浮动产生的不好的后果CSS官方文档解释：元素设置浮动后，元素脱离文档流，在当前向左或向右对齐，如果当前行没有足够的空间容纳该浮动元素，会自动的往下一行排列，直到有足够的空间。浮动元素碰到它的边框或浮动元素的边框停靠。下面分别来看对行内元素和块级元素产生的影响行内元素假设一个div(box1)内包含一个块元素div(box2)和行内元素span，在未对块级子元素(box2)设置浮动时
复制链接

扫一扫

专栏目录