CSS怎么实现元素浮动和清除浮动

发布时间:2021-03-18 14:05:05 作者:小新
来源:亿速云 阅读:168

这篇文章主要介绍CSS怎么实现元素浮动和清除浮动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

浮动基本介绍

属性值描述
left设置元素向左浮动。
right设置元素向右浮动。

右浮动实践

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

为什么结果图是一条边框线呢?因为在div标签中还没有内容呢,现在我们将子div标签设置宽高度为100px像素并且添加背景颜色。

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:right;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

注意:现在我们发现calss属性值为.box元素高度变矮了,这就说明了(浮动元素它已经脱离了标准文档流,不再占用空间了)、并且向右浮动,浮动到自身的父元素的边缘位置就停止了浮动。

左浮动实践

让我们进入左浮动的实践,实践内容如:将class属性值为.box1元素设置为左浮动。

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

结果图A

CSS怎么实现元素浮动和清除浮动

结果图B

CSS怎么实现元素浮动和清除浮动

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

注意:事实证明class属性值为.box2元素是存在的。

下面我们将calss属性值为.box2元素设置为左浮动看看有什么不一样的效果

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

注意:浮动元素浮动以后,其父元素不再将浮动的子元素包裹在父元素之内,所以结果图出现一条黑色的边框线,若有不明白的看第一个实践内容。

将行内元素设置浮动

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰3</span>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
        float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰</span>
  </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

注意:行内元素设置为浮动之后就拥有了块级元素的特点。

设置浮动总结

为什么要清除浮动呢?

代码块

<!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>清除浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
        
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h2>清除浮动</h2>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

class属性值为.box元素的子元素左浮动之后影响到下面的元素排版布局实践。

代码块

<!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>浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h2>清除浮动</h2>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

现在大家应该明白了为什么要清除浮动了,有浮动就必须清除浮动,因为上面的元素设置了浮动就会影响到下面元素排版布局。

清除浮动有3种方式

第一种方式

代码块

<!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>清除浮动</title>
    <style>
       .box{
         width: 600px;
         height: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h2>清除浮动</h2>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

这样是解决了下面元素排版布局问题,但是笔者不推荐这么做,因为高度是由子元素的内容撑起来的高度,而不是我们给的固定高度。

第二种方式

其实在CSS中也有清除浮动的属性,清除浮动属性名为clear。

clear属性值说明表 

 
属性值描述
left清除左侧浮动元素。
right清除右侧浮动元素。
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>清除浮动</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
         
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
       .clear{
         clear: both;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
  </div>
  <h2>清除浮动</h2>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

注意:这才是我们真正想要的结果,并且从视觉上来看浮动的元素包裹在父元素之内的效果。

第三种方式

代码块

<!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>溢出内容进行隐藏</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            
        }
    </style>
</head>
<body>
    <div>
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        
    </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

下面笔者将溢出的内容进行隐藏。

代码块

<!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>溢出内容进行隐藏</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        
    </div>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

代码块

<!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>清除浮动</title>
    <style>
       ul{
           list-style: none;
          
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>微笑是最初的信仰1</li>
        <li>微笑是最初的信仰2</li>
        <li>微笑是最初的信仰3</li>
        <li>微笑是最初的信仰4</li>
        <li>微笑是最初的信仰5</li>
        <li>微笑是最初的信仰6</li>
        <li>微笑是最初的信仰7</li>
        <li>微笑是最初的信仰8</li>
    </ul>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

注意:在这里笔者还没有给浮动元素清除浮动呢,大家可以明显的看到ul标签高度为0

清除浮动实践

代码块

<!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>清除浮动</title>
    <style>
       ul{
           list-style: none;
           overflow: hidden;
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>微笑是最初的信仰1</li>
        <li>微笑是最初的信仰2</li>
        <li>微笑是最初的信仰3</li>
        <li>微笑是最初的信仰4</li>
        <li>微笑是最初的信仰5</li>
        <li>微笑是最初的信仰6</li>
        <li>微笑是最初的信仰7</li>
        <li>微笑是最初的信仰8</li>
    </ul>
</body>
</html>

结果图

CSS怎么实现元素浮动和清除浮动

现在我们很清楚的看到ul标签高度为23px像素,为什么要使用:属性为overflow并且属性值为hidden来清除浮动,因为ul标签中只能使用li标签元素不能使用其它元素,所以属性为overflow并且属性值为hidden来清除浮动是最好不过啦。

以上是“CSS怎么实现元素浮动和清除浮动”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css中如何清除浮动
  2. CSS怎样清除浮动

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS如何实现鼠标移至图片上显示遮罩层效果

下一篇:原生JS与CSS实现软件卸载对话框功能的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》