首页 > 代码库 > 谷哥的小弟学前端(07)——CSS基础知识（5）
谷哥的小弟学前端(07)——CSS基础知识（5）
探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制
Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南
自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
在常见的CSS中我们知道：块级元素(比如<div></div>)独占一行显示；行内元素(比如<span></span>)在同一行显示。这些方式被称作标准流(normal flow)或者文档流。CSS默认的显示方式为标准流——块级元素纵向有序排列，行内块（行内）元素横向有序排列。
今天我们要学习和讨论的是有别于标准流的浮动(float)，嗯哼，开始吧
浮动(float)的简介
浮动(float)的语法：
float:left | right；
浮动(float)的作用：
设置了浮动的元素将脱离标准流(脱标)
关于浮动(float)的语法特别简单只需要为float属性设置left或者right即可，设置了该属性的元素会脱离标准流显示。
我们先来看一个小例子体会一下浮动(float)的使用及其效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.firstBox{
width:250px;
height:150px;
background-color: red;
}
.secondBox{
width:290px;
height:180px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="firstBox">
<br>
<br>
<br>
<br>
本文作者:谷哥的小弟
</div>
<div class="secondBox">
<br>
<br>
<br>
<br>
<br>
博客地址:http://blog.csdn.net/lfdfhl
</div>
</body>
</html>运行后效果如下图：
在这个例子中有两个<div></div>。在此为了方便讨论，我们将红色<div></div>称为第一个div，它使用了类选择器firstBox；将绿色<div></div>称为第二个div，它使用了类选择器secondBox
现在对代码稍作修改，给类选择器firstBox添加float属性，其余部分保持原样：
.firstBox{
width:250px;
height:150px;
background-color: red;
float: left;
}嗯哼，运行一下，观察效果：
我们发现：
第二个div显示在第一个div的下层。这是为什么呢？简单地，直观地说：为firstBox添加float属性导致第一个div脱离了标准流(脱标)，所以第一个div”上浮了”，第二个div就显示在其下方了。
好了，在看完关于浮动(float)最简单的示例之后，我们来瞅瞅浮动(float)的特点：
- 1、使用了float的元素会脱离标准流不再占原来的位置
- 2、几个块级元素(比如div)同时使用float时它们将在同一行显示
- 3、float可将行内元素转化为行内块元素
关于第一点，我们在刚才的示例中已经讲了，那么第二点是什么意思呢？我们再来看一个小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
div{
width:300px;
height:170px;
line-height: 170px;
margin: auto;
}
.firstBox{
background-color: red;
float: left;
}
.secondBox{
background-color: yellowgreen;
float: left;
}
.thirdBox{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="firstBox">
本文作者:谷哥的小弟
</div>
<div class="secondBox">
博客地址:http://blog.csdn.net/lfdfhl
</div>
<div class="thirdBox">
有心课堂:http://www.stay4it.com/
</div>
</body>
</html>在这个例子中有三个<div></div>。在此为了方便讨论，我们将红色<div></div>称为第一个div，它使用了类选择器firstBox；将绿色<div></div>称为第二个div，它使用了类选择器secondBox；将蓝色<div></div>称为第三个div，它使用了类选择器thirdBox。在这三个类选择器中，我们均设置了float:left，所以这三个<div></div>都会”浮起来”，效果如下：
关于float特点的第一点和第二点，我们在刚才的示例中已经讲了，那么第三点是什么意思呢？我们再来看一个小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
span{
width:150px;
height:70px;
line-height: 70px;
margin: auto;
background-color: yellowgreen;
font-weight: bold;
color: red;
float: left;
}
</style>
</head>
<body>
<span>有心课堂欢迎您</span>
<span>每天进步一点点</span>
</body>
</html>在这个例子中有两个<span></span>标签，在<head></head>里定义了标签选择器span在其中设置了属性float:left；代码运行后效果如下：
嗯哼，看到了吧——利用float:left属性将行内元素<span></span>转化为行内块元素，所以可为其设置高度。说到这大伙可能想起来了：我们以前利用display属性不是也可以进行模式的转换么？是的！那以后我们在进行模式转换的时候采用float呢还是display呢？答案是后者，因为float毕竟会导致元素脱标，所以多采用display进行模式的转换。
浮动(float)的作用
我们现在对浮动(float)有了一些基本的认识和了解，在此基础上再来看看浮动(float)的作用。
- 1、利用浮动(float)实现图文环绕
- 2、浮动(float)制作导航栏
- 3、浮动(float)实现网页布局
现对这三个浮动(float)的作用分别举例说明。
请看第一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
div{
width:385px;
height:250px;
background-color: yellowgreen;
}
div img{
margin: 0px 20px 0px 0px;
float: left;
}
</style>
</head>
<body>
<div>
<img src="girl.jpg" alt="">
<p>吉冈里帆，1993年1月15日出生于日本京都府，写真模特，隶属于A-Team事务所。2012年，吉冈里帆成为了A-Team事务所旗下艺人。2014年7月，在发售的时尚杂志《周刊花花公子》中首次挑战了写真模特工作；同年，主演了个人演的首部电影作品《清纯少女》 。2016年2月，通过出演NHK晨间剧《阿浅》受到大众关注；4月，首次参演民放台连续剧《宽松世代又如何》。2017年，出演松隆子主演的温情日剧《四重奏》。</p>
</div>
</body>
</html>运行后，效果如下图所示：
在该示例中展示一张图片及其对应的文字介绍。在此利用后代选择器div img为img设置了属性float:left;这样就导致图片”浮起来”并用文字将其环绕。这是浮动(float)属性十分常见的用法，也是浮动(float)属性的设计初衷。
请看第二个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.navigation{
height: 50px;
background-color: pink;
line-height: 50px;
}
li{
list-style: none;
float: left;
}
li a{
height: 50px;
display:inline-block;
padding: 0 10px;
}
li a:hover{
background-color: yellowgreen;
color: red;
}
</style>
</head>
<body>
<div class="navigation">
<ul>
<li>
<a href="#">有心课堂</a>
</li>
<li>
<a href="#">Android</a>
</li>
<li>
<a href="#">前端开发</a>
</li>
<li>
<a href="#">后台开发</a>
</li>
<li>
<a href="#">项目管理</a>
</li>
</ul>
</div>
</body>
</html>运行后，效果如下图所示：
在该示例中实现了一个简单的导航栏。该功能的重点在于为<li></li>设置属性float:left;从而让几个<li></li>显示在同一行；具体代码请参见第14-17行
请看第三个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.all{
width: 490px;
height: 350px;
background-color: #458B00;
margin: 0 auto;
}
.header{
height:25px;
background-color: pink;
}
.content{
height: 300px;
background-color: #46F3B6;
}
.left-content{
width: 50px;
height: 300px;
background-color: #20B2AA;
float: left;
}
.middle-content{
width: 390px;
height: 300px;
background-color:#CBE923;
float: left;
}
.right-content{
width: 50px;
height: 300px;
background-color: blue;
float: left;
}
.top-content{
height:150px;
background-color: #55cd0e;
}
.bottom-content{
height: 150px;
background-color: #a4cd0e;
}
</style>
</head>
<body>
<br>
<div class="all">
<div class="header"></div>
<div class="content">
<div class="left-content"></div>
<div class="middle-content">
<div class="top-content"></div>
<div class="bottom-content"></div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>运行后，效果如下图所示：
在该示例中展示常见的网页布局，它包括：header，left-content，middle-content，top-content，bottom-content，right-content等等部分。在进行网页布局的时候，我们需要将其中的某些内容对应的<div></div>显示在同一排。与上个示例类似，我们同样适用了float：left；具体代码请参见第34、41、48行。
今晚先写到这，明天晚上继续
谷哥的小弟学前端(07)——CSS基础知识（5）