CSS中若是实现元素浮动，看这篇文章就足够了

时间 2019-12-01

标签 css 若是实现元素浮动看这文章足够栏目 CSS 繁體版

原文原文链接

浮动基本介绍

在标准文档流中元素分为2种，块级元素和行内元素，若是想让一些元素既要有块级元素的特色也同时保留行内元素特色，只能让这些元素脱离标准文档流便可。
浮动可让元素脱离标准文档流，能够实现让多个元素排在同一行，而且能够设置宽高度。
其实浮动是经过float属性来实现的。
float属性值说明表：

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

右浮动实践

让咱们进入右浮动的实践，实践内容如：将class属性值为.box1元素设置为右浮动。
在进入有浮动实践以前咱们先看看要浮动元素结构是什么。
代码块html

<!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>

结果图ui

为何结果图是一条边框线呢？由于在div标签中尚未内容呢，如今咱们将子div标签设置宽高度为100px像素而且添加背景颜色。
代码块spa

<!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>

结果图3d

为何会排列为3行呢，由于3个div标签都是块级元素。
如今咱们将class属性值为.box1的元素设置为右浮动。
代码块code

<!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>

结果图htm

注意：如今咱们发现calss属性值为.box元素高度变矮了，这就说明了（浮动元素它已经脱离了标准文档流，再也不占用空间了）、而且向右浮动，浮动到自身的父元素的边缘位置就中止了浮动。blog

左浮动实践

让咱们进入左浮动的实践，实践内容如：将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>

结果图it

咱们先理解浮动的原理以后再解释下class属性值为.box2元素看不见的缘由。
如今笔者给你们看2张实践结果图如：
结果图Atable

结果图B

经过这2张结果图咱们能够把浮动简单的理解为“漂”举例：
假设class属性值为.box是一个池塘，3个子元素都是可以漂浮在池塘水面上的东西，如今咱们将calss属性值为.box1元素浮动起来，漂在池塘水面上，是否是就再也不占用池塘内的空间了。
既然咱们理解为“漂”它必定是漂浮在池塘水面之上，可是没有浮动的元素在池塘水面以内，因此class属性值为.box2元素看不见，并不表明它不存在只是被class属性值为.box1元素给遮挡住了，如今咱们将class属性值为.box2元素宽度设置为150px像素。
代码块

<!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>

结果图

注意：事实证实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>

结果图

可是class属性值为.box2的元素左浮动并无左浮动到自己父元素的边缘位置，为何在class属性值为.box1后面呢？由于父元素已经有了浮动的子元素后面的子元素在浮动就浮动到前面浮动的元素以后。
如今咱们将class属性值为.box3的元素设置为左浮动，看看有什么不同的效果。
代码块

<!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>

结果图

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

将行内元素设置浮动

若是咱们给行内元素设置了浮动，行内元素就拥有了块级元素的特色。
让咱们进入行内元素设置浮动实践，实践内容如：将div标签中的span标签设置为左浮动。
在设置左浮动以前咱们先看看给span标签设置宽高度和背景颜色有什么效果。
代码块

<!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>

结果图

如今发现咱们给span标签设置了宽高度为100px像素并无生效，由于如今span标签仍是行内元素。
如今咱们给span标签设置左浮动，而后咱们在看看效果如何。
代码块

<!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>

结果图

注意：行内元素设置为浮动以后就拥有了块级元素的特色。

设置浮动总结

浮动的特色如：
浮动元素脱离了标准的文档流，再也不占用父元素的任何空间。
浮动元素比标准文档流的元素层级要高，会将标准文档流的元素遮挡住。
浮动元素会向左浮动或向右浮动。
浮动元素会遇到父元素的边缘就中止了浮动。
浮动元素会遇到已经有了浮动的元素，后者会浮动到前者以后就中止了浮动。
浮动元素浮动以后就脱离了父元素，而且父元素再也不包裹浮动的元素。
行内元素设置为浮动，就拥有了块级元素的特色。