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

浮动基本介绍

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

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

右浮动实践

让我们进入右浮动的实践，实践内容如：将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;
       }
    </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

结果图

为什么结果图是一条边框线呢？因为在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>

结果图

为什么会排列为3行呢，因为3个div标签都是块级元素。
现在我们将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: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>

结果图

注意：现在我们发现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>

结果图

我们先理解浮动的原理之后再解释下class属性值为.box2元素看不见的原因。
现在笔者给大家看2张实践结果图如：
结果图A

结果图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>

结果图

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

设置浮动总结

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

CSS中如果实现元素浮动，看这篇文章就足够了的更多相关文章

CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了
浮动基本介绍在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
CSS中的定位与浮动
CSS中的定位与浮动本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
CSS中如何让元素隐藏
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...
Vue开发入门看这篇文章就够了
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...
Java设计模式（十三）别人再问你设计模式，叫他看这篇文章
原创文章,转载请务注明出处 OOP三大基本特性封装封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏. 继承继承是指这样一种能力,它可以使 ...
Elasticsearch 5.0 —— Head插件部署指南（Head目前支持5.0了！请不要看本篇文章了）
使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! Head目前支持5.0了!请不要看本篇文章了 Head目前支持5.0了! ...
一直对zookeeper的应用和原理比较迷糊，今天看一篇文章，讲得很通透，分享如下（转）
本文转自http://blog.csdn.net/gs80140/article/details/51496925 一直对zookeeper的应用和原理比较迷糊,今天看一篇文章,讲得很通透,分享如下: ...
vs2010如何安装mvc3，怎样安装，详细的步骤，从哪下载？请看这篇文章。
vs2010如何安装mvc3,怎样安装,详细的步骤,从哪下载?请看这篇文章. 安装步骤:vs2010 -> vs2010sp1 -> AspNetMVC3Setup -> AspNe ...
[ZZ]如果有人问你数据库的原理，叫他看这篇文章
如果有人问你数据库的原理,叫他看这篇文章 http://blog.jobbole.com/100349/ 文章把知识链都给串起来,对数据库做一个概述. 合并排序阵列.树和哈希表 B+树索引概述数据 ...

随机推荐

开源.Net Standard版华为物联网北向接口SDK
最近用到了华为的物联网平台API,但是官方没有.Net版的SDK,所以就自己封装了一个,开源出来给有需要的朋友,同时也算是为.Net Core的发展做点小贡献~ 源码地址:https://github ...
C和C++引用传递和数组传参引用
引用传递有两种传参方式,具体可参考文章概括地讲,就是 *声明一个形参是指针,所以需要传递指针实参,对应的函数实现也应当遵循指针的语法.这种实现思路并不针对于C或者C++,因为它们都有指针,所以都可以 ...
Caused by: java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required [ IDEA mybatis项目报错 ]
今天笔者用Springboot框架整合Mybatis做一个小小的项目: 代码写完,在运行项目时,IDEA给我报了3处错误: org.springframework.beans.factory.Unsa ...
linux 安装swoole
1.首先我们要安装swoole扩展的话,需要把它的包下载下来,下载地址是: https://github.com/swoole/swoole-src 2.下载下来之后进行解压: unzip swool ...
如何获取比 dism.log 更详细的日志
正文在工作中,曾经遇到过一个问题. 有一个 component,名字叫做 Oxford Adaptive Learning Dictionary,是一款牛津词典的应用.这个 component,需要 ...
CSPS模拟 96
我菜的一批. 反省一下,我只能在简单场考的好的原因. 过分依赖灵感,不注意积累思路历程和各种套路.没灵感直接崩了懒得打暴力,主要还是代码能力限制,打暴力真的很费时费力不打对拍,这个emmm和第二条 ...
git命令--subtree
目录 git命令--subtree subtree 主要命令 git subtree add --prefix=<prefix> <commit> git subtree ...
线段树合并学习笔记（P4556）
直入主题: 学习线段树合并..... 从名字就能看出,这个东西要合并线段树..... 线段树怎么能合并呢...... 暴力合就行了啊...... 一次从上往下的遍历,把所有的节点信息暴力合并,然后就没 ...
参与国际化项目需遵循的java命名规范
笔者最近帮助一些朋友应聘远程工作(一般都是一些国外的项目),国外的项目负责人一般都会要求提供github账号或者一些源代码,很多朋友在这一关就被筛选掉了,其中不乏一些我认为技术非常厉害的行业大牛,他们 ...
Helm 3 发布 | 云原生生态周报 Vol. 27
作者 | 墨封.元毅.冬岛.敖小剑.衷源业界要闻 1.Helm 3 发布美国时间 11 月 13 日,Helm 团队发布 Helm 3 第一个稳定版本.Helm 3 以 Helm 2 的核心特性为 ...

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

浮动基本介绍

右浮动实践

左浮动实践

将行内元素设置浮动

设置浮动总结

CSS中如果实现元素浮动，看这篇文章就足够了的更多相关文章

随机推荐

热门专题