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

随机推荐

CSS盒子模型+box-sizing
当对文档进行布局时,浏览器渲染引擎会根据css-Box模型(CSS Basic Box model)将所有元素表示为一个矩形盒子.CSS决定这些盒子的大小,位置以及属性(颜色,背景,边框尺寸) 标准盒 ...
写出float x 与“零值”比较的if语句——一道面试题分析
写出float x 与“零值”比较的if语句请写出 float x 与“零值”比较的 if 语句: const float EPSINON = 0.00001; if ((x >= - E ...
python实现人工智能Ai抠图功能
这篇文章主要介绍了python实现人工智能Ai抠图功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下自己是个PS小白,没办法只能通过技术来证明自己. 话不多说, ...
OC-音乐播放器-锁屏处理
QQ音乐播放的过程中,锁屏状态下的效果如下: 也就是说,QQ音乐播放过程中,添加锁屏远程事件的监听. 本文只记录本人知道的小知识点,不提供完整的代码. 实现的原理: (1)获取锁屏歌曲信息中心:MPN ...
Django表单集合----Formset
概述:Formset(表单集)是多个表单的集合.Formset在Web开发中应用很普遍,它可以让用户在同一个页面上提交多张表单,一键添加多个数据,比如一个页面上添加多个用户信息,下面将会详细讲述如何使 ...
JavaScript中instanceof的判断依据
读jquery源码的时候,发现作者为了让创建jquery对象更容易使用了用函数返回对象的方法 jQuery = function( selector, context ) { return new j ...
安装实时查看日志工具 log.io
官网:http://logio.org/ 一.环境 [root@centos ~]# cat /etc/system-release CentOS release 6.5 (Final) [root@ ...
建设城市(city)：组合数，容斥原理
想模一大堆人呢.考场上AC的大仙. 估计没人想给这题好好写一个题解吧,因为它的确挺简单的... 但是它对我来说一点都不简单啊!!! 至少出题人用脚写题解的时候肯定认为这道题是送分题了容斥,枚举至少有 ...
SpringBoot整合Swagger实战
源码地址:https://github.com/laolunsi/spring-boot-examples 目前SpringBoot常被用于开发Java Web应用,特别是前后端分离项目.为方便前后端 ...
UWP 带左右滚动按钮的横向ListView———仿NetFlix首页河的设计
也是之前写的控件了,模仿NetFlix的河的设计. 大体要求如下: 1. 横向的ListView 2. 左右按钮,可以左右移动河卡片,左右的滚动条不可见 3. 左右按钮仅在鼠标Hover事件中可见大 ...

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

浮动基本介绍

右浮动实践

左浮动实践

将行内元素设置浮动

设置浮动总结

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

随机推荐

热门专题