1.浮动涉及到左浮动，右浮动，清除浮动．

2.浮点的特点：

1.向指定的方向浮动，并且让出空间

2.如果后面的元素也是浮动的，那么后面的元素就会在碰到前面的浮动的元素或者边框时，就定位在那里

3.如果后面的元素没有浮动，则该元素就会在浮动的元素的下面

4.行内元素和块元素都可以浮动，行内元素浮动后会变成块元素

5.浮动的元素不占用空间

3.左浮动的实例代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div1{

            border:1px solid red;

            width:500px;

            height: 240px;

        }

        .div-box1{

            width:150px;

            height:100px;

            background-color:pink;

            border:1px solid blue;

            float:left;/*使用左浮动*/

            margin-top:5px;

            margin-left:5px;

        }

        .span1{

            background-color:silver;

            width:150px;

            height:100px;

            float:left;/*行内元素浮动后会变成块元素*/

            margin-top:5px;

            margin-left:5px;

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box1">div1</div>

    <div class="div-box1">div2</div>

    <div class="div-box1">div3</div>

    <div class="div-box1">div3</div>

    <span class="span1">span1</span>

    <span class="span1">span2</span>

</div>

</body>

</html>

效果如下：

当然也可以使用多元素选择器把两个标签放在一起来调整样式．

修改后的代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div1{

            border:1px solid red;

            width:500px;

            height: 240px;

        }

        .div-box1,.span1{

            width:150px;

            height:100px;

            background-color:pink;

            border:1px solid blue;

            float:left;/*使用左浮动*/

            margin-top:5px;

            margin-left:5px;

        }

        .span1{

            background-color:silver;

            /*width:150px;*/

            /*height:100px;*/

            /*float:left;!*行内元素浮动后会变成块元素*!*/

            /*margin-top:5px;*/

            /*margin-left:5px;*/

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box1">div1</div>

    <div class="div-box1">div2</div>

    <div class="div-box1">div3</div>

    <div class="div-box1">div3</div>

    <span class="span1">span1</span>

    <span class="span1">span2</span>

</div>

</body>

</html>

效果如下：

可以看到基本效果并没有改变，只是多个一个边框而已．

那么浮动是怎么让出空间的呢？？

来看下面的代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div-box1{

            background-color:red;

            width:60px;

            height:40px;

            float:left;

        }

        .div-box2{

            width:120px;

            height:60px;

            background-color:blue;

        }

        .div-box3{

            width:200px;

            height:100px;

            background-color:yellow;

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box1">div1</div>

    <div class="div-box2">div2</div>

    <div class="div-box3">div3</div>

</div>

</body>

</html>

效果如下：

如果让div-box2也浮动起来，效果会是怎么样的呢？？

给div-box2添加浮动，代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div-box1{

            background-color:red;

            width:60px;

            height:40px;

            float:left;

        }

        .div-box2{

            width:120px;

            height:60px;

            background-color:blue;

            float:left;

        }

        .div-box3{

            width:200px;

            height:100px;

            background-color:yellow;

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box1">div1</div>

    <div class="div-box2">div2</div>

    <div class="div-box3">div3</div>

</div>

</body>

</html>

效果如下：

4.浮动的元素不占用空间，该怎么理解呢？

来看下面的代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div-box1{

            background-color:red;

            width:60px;

            height:40px;

            float:left;/*设置左浮动*/

        }

        .div-box2{

            width:120px;

            height:60px;

            background-color:blue;

            float:left;/*设置左浮动*/

        }

        .div-box3{

            width:200px;

            height:100px;

            background-color:yellow;

            float:left;/*设置左浮动*/

        }

        .div1{

            width:500px;

            border:1px solid black;

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box1">div1</div>

    <div class="div-box2">div2</div>

    <div class="div-box3">div3</div>

</div>

</body>

</html>

效果如下：

当一个大的div包括了若干小div，如果父div的内的所有子div都浮动，则父div的高度为0.

当把一个div设置成右浮动时，这个div脱离标准流并且向右浮动，直到它的右边缘接触到包含框的右边缘．

5.右浮动的实例：

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div-box{

            background-color:blue;

            width:60px;

            height:40px;

            margin:5px;

        }

        .div1{

            width:200px;

            height:200px;

            border:1px solid red;

        }

        .te{

            float:right;

            margin-right:20px;

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box te">div1</div>

    <div class="div-box">div2</div>

    <div class="div-box">div3</div>

</div>

</body>

</html>

效果如下：

6.浮动的卡的现象

如果浮动元素的高度不同，那么当其向下移动的时候，可能会被其他浮动元素"卡住"，直到调整到合适的高度时，才会恢复到正常的高度

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .div-box{

            background-color:deeppink;

            width:100px;

            height:50px;

            margin:5px;

            float:left;

        }

        .div1{

            width:500px;

            height:200px;

            border:1px solid red;

        }

        .te{

            height:100px;

        }

    </style>

</head>

<body>

<div class="div1">

    <div class="div-box te">div1</div>

    <div class="div-box">div2</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

    <div class="div-box">div3</div>

</div>

</body>

</html>

效果如下：

CSS核心内容之浮动的更多相关文章

  1. CSS核心内容之盒子模型

    1.盒子模型具有的属性: 内容(content) 填充(padding) 边框(border) 边界(margin) 图示如下: 2.流概念 1.流的概念 在现实生活中已经流水,在网页设计中就是指元素 ...

  2. CSS核心内容：层叠和继承

    实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...

  3. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  4. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  5. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  6. ife任务刷题总结（一）－css reset与清除浮动

    本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...

  7. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  8. ES6/ES2015核心内容

    ECMAScript定义了: JS语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 – 布尔型.数字.字符串.对象等. 原型和继承 内建对象和函数的标准库 – JSON.Math.数组 ...

  9. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

随机推荐

  1. 洛谷 P1471 方差

    洛谷 P1471 方差 题目背景 滚粗了的HansBug在收拾旧数学书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的 ...

  2. python写外网收集信息器

    简单化,知道IP去扫描ip import socket from socket import * a=input('请输入域名:') try: ip=gethostbyname(a) print('[ ...

  3. 基于Xilinx FPGA的视频图像采集系统

    本篇要分享的是基于Xilinx FPGA的视频图像采集系统,使用摄像头采集图像数据,并没有用到SDRAM/DDR.这个工程使用的是OV7670 30w像素摄像头,用双口RAM做存储,显示窗口为320x ...

  4. HDU4920-Matrix multiplication-矩阵乘法 51nod-1137 矩阵乘法

    先贴两个基础的矩阵乘法,以后再贴一些题. hdu. Matrix multiplication Time Limit: 4000/2000 MS (Java/Others)    Memory Lim ...

  5. solr6.5的安装与配置

    环境介绍 solr 6.5 tomcat8 jdk1.8 win7系统 一.下载solr安装包 下载地址:http://www.apache.org/dyn/closer.lua/lucene/sol ...

  6. 从零开始学习前端开发 — 1、HTML基础

    一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...

  7. Linux终端连接Linux服务器

    我们经常需要通过类UNIX下连接我们的Linux服务器.比如我的Mac下经常需要连接上Linux服务器.一般系统都提供了ssh支持,可以直接连接: 通过命令: ssh root@120.25.12.9 ...

  8. CSS容器属性

    最近一直想美化博客的文字效果和增加文章末尾的转发提示,所以这两天抽空研究了一下CSS,前两篇可以翻我的博客,今天写的这篇是介绍增加文章末尾的转发提示,效果如文章末尾所示,好了,CSS很简单,我就不介绍 ...

  9. Linuxc - define 与 typedef的区别

    预处理就是讲一些头文件展开. 预处理还会将使用到宏定义的值替换为真正的值.宏只是单纯的字符串的替换. #define 宏定义 眼里没有语法,不用分号结尾. typedef 定义别名,是有语法的,要用分 ...

  10. mysql explain用法和结果的含义

    转自:http://blog.chinaunix.net/uid-540802-id-3419311.html explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择 ...