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. isdigit函数

    isdigit是计算机应用C语言中的一个函数,主要用于检查参数c是否为阿拉伯数字0到9. 相关函数 isdigit 表头文件 #include <ctype.h>(C语言),#includ ...

  2. 51Nod 1003 阶乘后面0的数量(数学,思维题)

    1003 阶乘后面0的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5         难度:1级算法题 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 720 ...

  3. c++(单词统计)

    在面试环节中,有一道题目也是考官们中意的一道题目:如果统计一段由字符和和空格组成的字符串中有多少个单词? 其实,之所以问这个题目,考官的目的就是想了解一下你对状态机了解多少. (1) 题目分析 从题目 ...

  4. angular2 表单验证

    模版式表单 (1) angular遇到form自动接管,不想自动接管,添加ngNoForm,当标签为div时,但想被表单接管,添加ngForm; (2) ngForm可以被模版本地变量引用,以便在模版 ...

  5. [学习OpenCV攻略][016][RedHat下安装OpenCV]

    安装环境 操作系统: Red Hat Enterprise Linux Server 6.3 相关软件: ffmpeg-0.8.15.tar.bz2.cmake-3.5.1.tar.gz.OpenCV ...

  6. 利用脚本将EXCEl表倒入PowerDesigner中

    1.Excel表格样式 2.脚本代码 '****************************************************************************** O ...

  7. leak finder

    介绍 leak finder 是google开源团队发布了一个新的可以帮助web应用程序开发者在他们的JavaScript程序中找出内存泄露问题的工具: http://feedproxy.google ...

  8. java垃圾回收的分类

    1.线程数 分为串行垃圾回收器和并行垃圾回收器.串行垃圾回收器一次只使用一个线程进行垃圾回收:并行垃圾回收器一次将开启多个线程同时进行垃圾回收.在并行能力较强的 CPU 上,使用并行垃圾回收器可以缩短 ...

  9. Diffie-Hellman密钥交换

    Diffie-Hellman密钥交换(DHKE)是由Whitfield Diffie和Martin Hellman在1976年提出的.密钥交换方案提供了实际中密钥分配问题的解决方案,即允许双方通过不安 ...

  10. linux 磁盘加密和tpm搭配使用1

    一.基本名称,容易混淆 1.dm-crypt是linux的2.6内核开始集成的一种磁盘加密功能.十几年来,连sche调度算法都被改了N次,但dm-crypt一直稳定在内核中,稳定性还是很好的. 2.c ...