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+树索引概述数据 ...

随机推荐

大家都说好用的 Python 命令行库：click
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
scrapy爬取京东iPhone11评论（一）
咨询行业中经常接触到文本类信息,无论是分词做词云图,还是整理编码分析用,都非常具有价值. 本文将记录使用scrapy框架爬取京东IPhone11评论的过程,由于一边学习一边实践,更新稍慢请见谅. 1. ...
sql中实现先排序后分组
数据表结构和数据如下: CREATE TABLE `commun_message_chat_single` ( `id` ) NOT NULL AUTO_INCREMENT, `chat_id` ) ...
使用asp.net core 3.0 搭建智能小车2
上一篇中我们把基本的运行环境搭建完成了,这一篇中,我们实战通过树莓派B+连接HC-SR04超声波测距传感器,用c# GPIO控制传感器完成距离测定,并将距离显示在网页上. 1.HC-SR04接线传感 ...
CVE-2019-0708： Windows RDP远程漏洞无损检测工具下载
CVE-2019-0708: Windows RDP远程漏洞无损检测工具下载 0x00下载链接 https://free.360totalsecurity.com/CVE-2019-0708/dete ...
转：NFS原理详解
原文:http://atong.blog.51cto.com/2393905/1343950 一.NFS介绍 1)什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录.NFS ...
学习笔记03http协议
1.浏览器就是一个sokect客户端,使用http协议与服务器进行交流.http请求:请求头:(请求方法)sp(url)sp http/1.x <cr><lf>(通用头类型名) ...
简述同步和异步,以及js的任务队列.
javascript是单线程的一门语言,所以在执行任务的时候,所有任务必须排队,然后一个一个的执行.这就是同步模式所以同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个 ...
csps模拟测试110
好久没写博客了,主要是太懒了,这次考试其实状态还算好. 考试的时候半小时左右打完T1T2,先没打T2对拍,想了想T3,大概有了一个bitset的思路,回去补上了T2的对拍. 然后T3想了一些东西: 三 ...
Python实现群聊天小程序代码
群聊服务端服务端Server.py代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2018/5/18 16:05 # @D ...

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

浮动基本介绍

右浮动实践

左浮动实践

将行内元素设置浮动

设置浮动总结

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

随机推荐

热门专题