讲给后台程序员看的前端系列教程(24)——浮动
C语言自学完备手册(33篇)
Android多分辨率适配框架
HTML5前端开发实战系列教程
MySQL数据库实操教程(35篇图文版)
推翻自己和过往——自定义View系列教程(10篇)
走出思维困境，踏上精进之路——Android开发进阶精华录
讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
CSS布局的三种机制
网页布局的核心就是用CSS摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是：普通流（标准流）、浮动和定位，概述如下：
普通流（标准流）
从前面的学习中我们知道：
- 块级元素(比如div和p、form)按照从上至下的顺序独占一行显示；
- 行内元素(比如span、a、em和i)按照从左到右的顺序在同一行显示。
这些显示方式被称作标准流(normal flow)或者文档流。在标准流中：块级元素纵向有序排列，行内块元素和行内元素横向有序排列。
浮动
让盒子从标准流中浮起来，常用于将多个块级盒子在同一行显示。
定位
将盒子定在浏览器的某个位置。
为何需要浮动(float)
在进入float学习之前，我们先思考以下2个布局中最常见的问题：
-
问题1：如何让多个盒子(div)水平排列成一行？
-
问题2：如何实现盒子的左右对齐？
我们虽然可用之前的dispaly:inline-block来尝试解决这两个问题；但是，该方法存在缺陷：
- 1、各个div中间会有空白缝隙，很难消除或者调整缝隙大小。
- 2、不能实现盒子左右的对齐
小结
因为一些网页布局要求，标准流不能再满足我们的需要了，因此需要使用浮动来实现页面效果。
浮动(float)简介
今天我们要学习和讨论的是有别于标准流的浮动(float)，嗯哼，开始吧！
浮动(float)的概念
浮动的元素可以向左或向右移动，直到它的外边缘碰到父容器或另一个浮动框的边框为止。浮动的元素会从原文档流中脱离，不但影响自身还会影响周围的元素对其进行环绕。
简单地说：设置了浮动的元素将脱离原标准流(脱标)移动到指定的位置。
浮动(float)的作用
- 浮动可实现文字环绕图片，这也是float的设计初衷
- 浮动可让多个盒子(div)水平排列成一行，这是浮动非常常见的应用
- 浮动可以实现盒子的左右对齐
浮动(float)的语法
float:left | right | none;
- left：左浮动
- right：右浮动
- none：不浮动，该值为默认值。
浮动(float)入门示例
利用浮动(float)实现图文环绕。
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
img {
margin: 10px;
float: left;
width: 20%;
}
style>
head>
<body>
张含韵，1989年4月9日出生于四川省德阳市旌阳区，中国内地流行乐女歌手、影视演员。2004年，参加湖南卫视选秀娱乐节目《超级女声》的比赛，获得成都唱区亚军、全国总决赛季军，从而正式进入演艺圈。2005年，推出首张个人音乐专辑《我很张含韵》。2006年3月，获得“东方风云榜”最佳新人银奖；同年，出演个人首部电视剧《浪击天涯》。2007年2月，推出第二张个人音乐专辑《青春无敌》。
<img src="img/girlfriend.jpg" title="我的女神">
可惜的是，张含韵转行演员并不太顺利，参演的几部作品没用让她走红，她的演员生涯长路漫漫。加上在低谷的这段时间，张含韵没用管理好身材，发福了不少，整个人显得很臃肿，曾经那个有点婴儿肥的脸蛋，变得更加圆润，也因此颜值下降了不少，几乎行走在娱乐圈的边缘。直到张含韵出演了《知否知否应是绿肥红瘦》，小花才慢慢地回到众人的视线里。张含韵和赵丽颖私底下其实是很好的朋友，两人在一部戏里经常互动，趁着《知否》的热播，张含韵迎来她事业的第二次机遇，而张含韵的颜值也恢复到了巅峰时期。张含韵近日营业动态中，晒出了她和好友的自拍，30岁的张含韵真的越长越年轻了，看起来就像大学生一样，非常的清纯可爱。张含韵是四川女孩，天生丽质，特别是鼻子，是独特的鹰钩鼻，是很多明星都羡慕不来。郑爽的鼻子这几年变化也很大，慢慢的有了鹰钩鼻，但对比张含韵，还是小花的鼻子更加自然和美观，郑爽的鼻子看起来怪怪的。张含韵的魅力不仅于此，日常打扮的她真的就像个大学生班，喜欢各种自拍。看到这样的张含韵，男生们有种想恋爱的感觉，虽然小花在娱乐圈呆了很多年，但是能保持清纯可爱的性格实属难得，那些曾经的男粉丝，看到现在的张含韵，依然有种怦然心动的触动。张含韵和彭冠英两人现在这种情况，倒是很低调，低调到多少人已经开始为他们着急的地步，至于说两人到底有没有发展到最后一步，作为圈外人，我们实在是难以知道，但多少还是觉得两人真的很适合，要是能够走到一起，倒也很好。张含韵是凭借当年《超级女生》出道的，出道之初，张含韵就已经很出名了，不知道大家还记不记得当年张含韵那一首《酸酸甜甜就是我》，只可惜后续超女结束后，张含韵的签约公司就倒闭了，因此张含韵就没有了资源，随后又回归到本初，继续开始自己的求学之路。这一路走来张含韵算得上是04年超女中最为坚强的一个，有惊天的成绩，张含韵付出了多少的努力，怕是只有自己知道了。说起张含韵和彭冠英，两人是在《因为爱情有多美》相识的，后续又在《兰陵王妃》又再次有了合作，也就是在那个时候两个人之间有了在一起的绯闻，但是两人既没有官宣却也没有否认，这样的处理方式，多少人看的难过，就像是刀架在脖子上，进退不得。外人看着心痒痒，只有两个当事人安之若素，就是不出来说话。就现在来看，主要就是两个方面：一是两人已经在一起了，只是两人处理问题比较低调，因此到现在依然还没有对外宣布，证据就是当年两人参加快本的时候，何炅说两人是情侣关系，不知道是不是因为节目效果炒作的原因，反正两人都没有否认，偶尔爆出的几张照片，却又像是情侣之间才有的关系，同时也被媒体拍到两人夜会、一起回公寓酒店的照片。二是两人之间只是好朋友关系，并没有在一起，只是因为合作的关系，导致两人之间的额关系比较好，因此被媒体给强行安排在一起了。证据就是有几次媒体紧逼两人回答他们之间的关系，他们就承认只是好朋友，并不是情侣关系，这似乎有点站不住脚的感觉。
body>
html>
在该示例中为img设置了属性float:left;这样就导致图片"浮起来"并用文字将其环绕。此为浮动(float)属性十分常见的用法，也是研究人员设计float的初衷！
浮动(float)特性
-
1、浮动的元素漂浮在标准流的上面，即脱离标准流； 俗称 “脱标”
-
2、浮动的元素会把自己原来的位置漏给下面标准流的盒子；即不再占有原来位置
-
3、float属性可将块级元素(例如div)在效果上转换为行内块元素inline-block
请看如下示例：
页面中一共有三个div标签，默认情况下它们按照从上至下的顺序依次排列。
代码如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
.firstBox {
width: 100px;
height: 100px;
background: pink;
}
.secondBox {
width: 150px;
height: 150px;
background: red;
}
.thirdBox {
width: 200px;
height: 200px;
background: blue;
}
style>
head>
<body>
<div class="firstBox">div>
<div class="secondBox">div>
<div class="thirdBox">div>
body>
html>
效果如下：
在此为.firstBox添加浮动，其余代码不作任何改动。
代码如下：
.firstBox {
width: 100px;
height: 100px;
background: pink;
float: left;
}
效果如下：
在该示例中，我们可以看到：firstBox脱离了原本的标准流显示在secondBox和thirdBox之上。类似地，我们再给.secondBox设置浮动并观察效果。
代码如下：
.secondBox {
width: 150px;
height: 150px;
background: red;
float: left;
}
效果如下：
在该示例中，我们可以看到：firstBox和secondBox脱离了原本的标准流显示在thirdBox之上。类似地，我们继续给.thirdBox设置浮动并观察效果。
代码如下：
.thirdBox {
width: 200px;
height: 200px;
background: blue;
float: left;
}
效果如下：
在该示例中，我们可以看到：
- 1、firstBox和secondBox和thirdBox均脱离了原本的标准流
- 2、原本的块级元素div不再独占一行，而是像行内块元素inline-block一样可在同一行显示
清除浮动(float)
在HTML中当元素设置为float后脱离原标准流；此时，与之相邻的其它元素会受浮动的影响产生位置上的变化。为避免浮动对其它元素的影响需要清除浮动所带来的影响。
概况地说：
清除浮动带来的影响简称清除浮动。
常见场景：
父容器的高度由子元素决定。即由子元素撑开父元素，父元素包含子元素，子元素有多高决定了父元素的高度。但是，一旦子元素使用后就将浮动脱离了原标准流，从而导致父容器的高度变为了0。所以，清除浮动主要为了解决子元素浮动引起父元素高度为0的问题。清除浮动之后，父级就会根据浮动的子元素自动检测高度。
语法如下：
选择器{clear:属性值}
clear常用属性如下：
- left：清除左侧浮动的影响
- right：清除右侧浮动的影响
- both：清除左右两侧浮动的影响
- none：不清除浮动，该值为clear属性的默认值
我们先来看正常的情况：
<html>
<head>
<meta charset="utf-8">
<title>浮动title>
<style>
/*父容器的高度由子元素决定。即父元素包含子元素,子元素撑开父元素*/
.bigPinkDiv {
width: 500px;
background-color: pink;
border: black 2px solid;
}
.smallGreenyellowDiv {
width: 200px;
height: 200px;
background-color: greenyellow;
}
.smallBlueDiv {
width: 250px;
height: 250px;
background-color: blue;
}
.redDiv {
width: 700px;
height: 150px;
background-color: red;
}
style>
head>
<body>
<div class="bigPinkDiv">
<div class="smallGreenyellowDiv">div>
<div class="smallBlueDiv">div>
div>
<div class="redDiv">div>
body>
html>
现在为smallGreenyellowDiv和smallBlueDiv均设置属性float:left
<html>
<head>
<meta charset="utf-8">
<title>浮动title>
<style>
/*父容器的高度由子元素决定。即父元素包含子元素,子元素撑开父元素*/
.bigPinkDiv {
width: 500px;
background-color: pink;
border: black 2px solid;
}
/*利用float: left设置浮动*/
.smallGreenyellowDiv {
width: 200px;
height: 200px;
background-color: greenyellow;
float: left;
}
/*利用float: left设置浮动*/
.smallBlueDiv {
width: 250px;
height: 250px;
background-color: blue;
float: left;
}
.redDiv {
width: 700px;
height: 150px;
background-color: red;
}
style>
head>
<body>
<div class="bigPinkDiv">
<div class="smallGreenyellowDiv">div>
<div class="smallBlueDiv">div>
div>
<div class="redDiv">div>
body>
html>
在此，我们仔细观察：bigPinkDiv的高度变为了0，我们只能看见它的黑色边框。这就是子元素浮动导致父元素变为0。
在此，我们介绍两种常用的清除浮动的方法。
清除浮动(float)的第一种方式
W3C推荐的做法是在浮动元素末尾添加用于清除浮动。
<html>
<head>
<meta charset="utf-8">
<title>浮动title>
<style>
/*父容器的高度由子元素决定。即父元素包含子元素,子元素撑开父元素*/
.bigPinkDiv {
width: 500px;
background-color: pink;
border: black 2px solid;
}
/*利用float: left设置浮动*/
.smallGreenyellowDiv {
width: 200px;
height: 200px;
background-color: greenyellow;
float: left;
}
/*利用float: left设置浮动*/
.smallBlueDiv {
width: 250px;
height: 250px;
background-color: blue;
float: left;
}
.redDiv {
width: 700px;
height: 150px;
background-color: red;
}
style>
head>
<body>
<div class="bigPinkDiv">
<div class="smallGreenyellowDiv">div>
<div class="smallBlueDiv">div>
<div style="clear:both">div>
div>
<div class="redDiv">div>
body>
html>
清除浮动(float)的第二种方式
在父容器中使用overflow: hidden;清除浮动。
<html>
<head>
<meta charset="utf-8">
<title>浮动title>
<style>
/*父容器的高度由子元素决定。即父元素包含子元素,子元素撑开父元素*/
.bigPinkDiv {
width: 500px;
background-color: pink;
border: black 2px solid;
/* 清除浮动 */
overflow: hidden;
}
/*利用float: left设置浮动*/
.smallGreenyellowDiv {
width: 200px;
height: 200px;
background-color: greenyellow;
float: left;
}
/*利用float: left设置浮动*/
.smallBlueDiv {
width: 250px;
height: 250px;
background-color: blue;
float: left;
}
.redDiv {
width: 700px;
height: 150px;
background-color: red;
}
style>
head>
<body>
<div class="bigPinkDiv">
<div class="smallGreenyellowDiv">div>
<div class="smallBlueDiv">div>
div>
<div class="redDiv">div>
body>
html>
浮动(float)应用场景
我们现在对浮动(float)有了一些基本的认识和了解，在此基础上再来看看浮动(float)的常用的应用场景。
- 1、利用浮动(float)实现盒子的左右对齐
- 2、利用浮动(float)制作导航栏
- 3、利用浮动(float)实现网页布局
现对浮动(float)的三个常用应用场景分别举例说明。
浮动示例1
代码如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动title>
<style type="text/css">
.firstBox {
width: 150px;
height: 150px;
background: pink;
float: left;
}
.secondBox {
width: 150px;
height: 150px;
background: greenyellow;
float: right;
}
style>
head>
<body>
<div class="firstBox">div>
<div class="secondBox">div>
body>
html>
效果如下：
浮动示例2
代码如下：
<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;
width: 20%;
}
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">热门服饰a>
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>
效果如下：
在该示例中，我们巧妙地在ul中利用浮动实现了网站导航栏。
浮动示例3
代码如下：
<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等等部分。在进行网页布局的时候，我们需要将其中的某些