讲给Android程序员看的前端教程(20)——float浮动
探索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
- 本文视频教程：http://www.stay4it.com/my/course/37
我们知道：块级元素(比如
)独占一行显示；行内元素(比如)在同一行显示。这些显示方式方式被称作标准流(normal flow)或者文档流。在标准流中：块级元素纵向有序排列，行内块元素和行内元素横向有序排列。今天我们要学习和讨论的是有别于标准流的浮动(float)，嗯哼，开始吧！
浮动(float)简介
浮动(float)的作用
设置了浮动的元素将脱离标准流(脱标)
浮动(float)的语法
float:left | right；
关于浮动(float)的语法特别简单，只需要为float属性设置left或者right即可，设置了该属性的元素就会脱离标准流显示。
浮动(float)的特点
我们先来看一个小例子体会一下浮动(float)的使用及其效果。
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
.firstBox {
width: 250px;
height: 100px;
background-color: red;
}
.secondBox {
width: 300px;
height: 150px;
background-color: yellowgreen;
}
style>
head>
<body>
<div class="firstBox">
本文作者:谷哥的小弟
div>
<div class="secondBox">
博客地址:http://blog.csdn.net/lfdfhl
div>
body>
html>
运行后效果如下图：
在这个例子中有两个
。在此为了方便讨论，我们将红色div称为第一个div，它使用了类选择器firstBox；将绿色div称为第二个div，它使用了类选择器secondBox现在对代码稍作修改，给类选择器firstBox添加float属性，其余部分保持原样：
.firstBox {
width: 250px;
height: 100px;
background-color: red;
float: left;
}
运行一下，请观察效果：
我们发现：第二个div显示在第一个div的下层。这是为什么呢？简单地，直观地说：为firstBox添加float属性导致第一个div脱离了标准流(脱标)，所以第一个div"上浮了"，第二个div就显示在其下方了。
在看完关于浮动(float)最简单的示例之后，我们来总结一下浮动的特点：
- 1、使用了float的元素会脱离标准流不再占原来的位置
- 2、几个块级元素(比如div)同时使用float时它们将在同一行显示
- 3、float可将行内元素转化为行内块元素
关于第一点，我们在刚才的示例中已经讲了，那么第二点是什么意思呢？我们再来看一个小例子：
<html lang="en">
<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，它使用了类选择器firstBox；将绿色div；称为第二个div，它使用了类选择器secondBox；将蓝色div；称为第三个div，它使用了类选择器thirdBox。在这三个类选择器中，我们均设置了float:left，所以这三个div都会"浮起来"，效果如下：
关于float特点的第一点和第二点，我们在刚才的示例中已经讲了，那么第三点是什么意思呢？我们再来看一个小例子：
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
strong {
width: 170px;
height: 70px;
margin-left: 15px;
background-color: yellowgreen;
font-weight: bold;
color: red;
float: left;
}
style>
head>
<body>
<strong>有心课堂欢迎您strong>
<strong>每天进步一点点strong>
body>
html>
在这个例子中有两个标签，在标签选择器strong在其中设置了属性float:left；代码运行后效果如下：
在该示例中利用float:left属性将行内元素strong转化为行内块元素，所以可为其设置高度。说到这大伙可能想起来了：我们以前利用display属性不是也可以进行模式的转换么？是的！那以后我们在进行模式转换的时候采用float呢还是display呢？答案是后者，因为float毕竟会导致元素脱标
浮动(float)用途
我们现在对浮动(float)有了一些基本的认识和了解，在此基础上再来看看浮动(float)的用途。
- 1、利用浮动(float)实现图文环绕
- 2、利用浮动(float)制作导航栏
- 3、利用浮动(float)实现网页布局
现对这三个浮动(float)的用途分别举例说明。
第一个示例
<html lang="en">
<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" title="我的女朋友">
<p>我的女友......p>
div>
body>
html>
运行后，效果如下图所示：
在该示例中展示一张图片及其对应的文字介绍。在此利用后代选择器div img为img设置了属性float:left;这样就导致图片"浮起来"并用文字将其环绕，此为浮动(float)属性十分常见的用法，也是研究人员设计float的初衷！
第二个示例
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
background-color: #272822;
}
li {
list-style: none;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: yellowgreen;
color: red;
}
style>
head>
<body>
<ul>
<li>
<a href="http://blog.csdn.net/lfdfhl">有心课堂a>
li>
<li>
<a href="http://blog.csdn.net/lfdfhl">Androida>
li>
<li>
<a href="http://blog.csdn.net/lfdfhl">前端开发a>
li>
<li>
<a href="http://blog.csdn.net/lfdfhl">后台开发a>
li>
<li>
<a href="http://blog.csdn.net/lfdfhl">项目管理a>
li>
ul>
body>
html>
运行后，效果如下图所示：
在该示例中利用float实现了导航栏功能。
第三个示例
<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等等部分。在进行网页布局的时候，我们需要将其中的某些内容对应的
显示在同一排。与上个示例类似，我们同样使用了float：left；具体代码请参见第34、41、48行。清除浮动(float)
有这么一种现象：父元素的高度为auto且父元素中的子元素设置了float属性，此时父元素的高度不能自动伸长以适应内容的高度而导致内容溢出到父容器外面从而影响或者破坏布局。这个现象叫浮动溢出，为防止该现象的出现我们需要利用clear:left|right|both清除浮动(float)的影响。
我们先来看一个正常的情况：
<html lang="en">
<head>
<meta charset="utf-8">
<title>float浮动title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.all {
width: 500px;
height: auto;
background-color: yellow;
}
.left-content {
width: 250px;
height: 200px;
background-color: pink;
}
.right-content {
width: 250px;
height: 200px;
background-color: blue;
}
.bottom-content {
height: 150px;
width: 500px;
background-color: #00FF00;
}
style>
head>
<body>
<br>
<div class="all">
<div class="left-content">div>
<div class="right-content">div>
div>
<div class="bottom-content">div>
body>
html>
在该示例中为父元素即使用了类选择器all的
设置其高度为自动增长height:auto;在该父元素之下有三个它们分别使用了类选择器left-content、right-content、bottom-content，运行后效果如下：
现在为left-content和right-content均设置属性float:left，运行后观察效果：
父元素即使用了类选择器all(其高度设置为auto)的div；在子元素(即使用了类选择器left-content和right-content的div)中设置了float属性。此时，最下方使用类选择器bottom-content的绿色div由于溢出导致其在界面中不可见。现在，我们就需要清除浮动(float)的影响。
清除浮动(float)的第一种方式
<html lang="en">
<head>
<meta charset="utf-8">
<title>清除浮动(float)的第一种方式title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.all {
width: 500px;
height: auto;
background-color: yellow;
}
.left-content {
width: 250px;
height: 200px;
background-color: pink;
float: left;
}
.right-content {
width: 250px;
height: 200px;
background-color: blue;
float: left;
}
.bottom-content {
width: 500px;
height: 150px;
background-color: #00FF00;
}
.clearfix {
clear: both;
}
style>
head>
<body>
<br>
<div class="all">
<div class="left-content">div>
<div class="right-content">div>
<div class="clearfix">div>
div>
<div class="bottom-content">div>
body>
html>
在该示例中：
- 定义类选择器clearfix，设置属性clear: both，请参见代码第41-43行
- 在设置了float属性的两个div的下方添加一个div并设置其类选择器clearfix，请参见代码第53行
- 除此以外，对代码不作其它修改
运行后，效果如下：
嗯哼，在此利用类选择器clearfix清除了浮动(float)所带来的溢出影响。
清除浮动(float)的第二种方式
<html lang="en">
<head>
<meta charset="utf-8">
<title>清除浮动(float)的第二种方式title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.all {
width: 500px;
height: auto;
background-color: yellow;
overflow: hidden;
}
.left-content {
width: 250px;
height: 200px;
background-color: pink;
float: left;
}
.right-content {
width: 250px;
height: 200px;
background-color: blue;
float: left;
}
.bottom-content {
width: 500px;
height: 150px;
background-color: #00FF00;
}
style>
head>
<body>
<br>
<div class="all">
<div class="left-content">div>
<div class="right-content">div>
div>
<div class="bottom-content">div>
body>
html>
在该示例中：
- 子元素使用了类选择器left-content，请参见代码第47行
- 子元素使用了类选择器right-content，请参见代码第48行
- 子元素的父元素使用了类选择器all，请参见代码第46行
- 在类选择器all中设置属性overflow: hidden，请参见代码第17行
运行效果同上图，不再赘述。但是请注意：如果父元素中有定位的元素，一般不推荐使用该种方式清除浮动(float)带来的影响。
清除浮动(float)的第三种方式
<html lang="en">
<head>
<meta charset="utf-8">
<title>清除浮动(float)的第三种方式title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.all {
width: 500px;
height: auto;
background-color: yellow;
}
.left-content {
width: 250px;
height: 200px;
background-color: pink;
float: left;
}
.right-content {
width: 250px;
height: 200px;
background-color: blue;
float: left;
}
.bottom-content {
width: 500px;
height: 150px;
background-color: #00FF00;
}
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
style>
head>
<body>
<br>
<div class="all clearfix">
<div class="left-content">div>
<div class="right-content">div>
div>
<div class="bottom-content">div>
body>
html>
在该示例中利用CSS3中的伪元素清除浮动(float)带来的影响
- 定义clearfix:after，请参见代码第41-48行
- 为兼容IE浏览器定义clearfix，请参见代码第50-52行
- 在父元素中使用all和clearfix，请参见代码第58行
运行效果同上图，不再赘述。该方式是一种较为标准和实用的写法，故在开发中广泛使用。