CSS-浮动与布局

学习目标

• 掌握浮动的特性
• 掌握清除浮动的技巧
• 掌握两栏和三栏布局的实现方式

为什么需要浮动？

1. 文字围绕图片
2. 水平排列布局

浮动的例子
• 文字围绕浮动元素

<div class='wrapper'>
<img src='http://placehold.it/100/ff0'>
<p>float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列
布局的最常用工具之一。本文将阐述它的有关知识。</p>
</div>

<style>
.wrapper {
  width: 300px;
  border: 1px solid #ccc;
}
.wrapper img {
  float: left;
}
</style>

一、浮动

• 定义

• float 属性能让一个元素放在其容器的左侧或右侧，允许文本和内联元素环绕它。设置浮动的元素从网页的 普通流(normal flow) 中脱离，但不是完全脱离

• 特性

• 一个浮动元素会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动元素的外边。如果存在行盒，浮动元素的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到位置合适

• 因为浮动元素不在普通流内，在浮动盒之前或者之后创建的未定位的（nonpositioned）块盒会竖直排列，就像浮动不存在一样。然而，浮动元素之后的行盒
  会进行必要的缩短，为了给浮动元素的margin box让出空间

普通流(normal flow)
• 什么是普通流

• 就是元素在正常情况下默认的摆放规则
• 块级元素宽度撑满父亲、高度由内容撑开，可以设置宽高。按照在HTML里的顺序从上到下排列，会出现边距合并
• 内联元素的宽高与内容一致，无法设置宽高，只要有足够空间就会在一行排列，如果空间不够会下移一行

什么是脱离普通流

• 就是元素不按默认规则摆放了，其他正常元素在计算自己的摆放位置时不把脱离普通流的元素包括在内

1.1、浮动特性演示

• 不浮动的情况

<div class="wrapper">
 <div class="box">1</div> 
<div class="box">2</div>
 <div class="box">3</div>
 </div> 

<style>
 .wrapper { 
  border: 1px solid red; 
}
.box { 
  width: 100px; 
  height: 50px; 
  border: 1px solid #333; 
  margin: 10px; 
} 
</style>

• 浮动的情况

• 一行放不下会下移
• 脱离普通流，父亲无法发现浮动元素存在，高度为0

<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

<style>
.wrapper {
  border: 1px solid red;
}
.box {
  float: left;
  width: 100px;
  height: 50px;
  border: 1px solid #333;
  margin: 10px;
}
</style>

• 被卡主

<div class="wrapper">
<div class="box">1</div> 
<div class="box">2</div>
<div class="box">3</div>
 </div> 

<style> 
.wrapper {
  border: 1px solid red; 
}
.box { 
  float: left;
  width: 100px; 
  height: 50px; 
  border: 1px solid #333; 
  margin: 10px; 
}
.box:nth-child(1) { 
  height: 80px 
} 
</style>

• 对周边行内元素的影响

<div class="wrapper">
 <div class="box">1</div> 
 <div class="text">块盒看不见浮动的 box1，但我是文本我能看见</div>
  </div> 

<style>
.wrapper { 
  border: 1px solid red; 
  width: 200px;
}
.box { 
 float: left;
  width: 100px; 
  height: 20px; 
  border: 1px solid #333; 
  margin: 10px;
}
.text { 
  background: pink; 
  margin-left: 20px;
} 
</style>

• 浮动元素宽度是收缩的

• 浮动的块级元素，宽度收缩了

<div class="wrapper">
<div class="box">1</div>
</div>

<style>
.wrapper {
border: 1px solid red;
width: 200px;
}
.box {
float: left;
background: pink;
}
</style>

• 浮动元素呈现块级特性

• 浮动的行内元素可以设置宽度、高度、内外边距

<div class="wrapper">
<span class="box">1</span>
<span>不浮动</span>
</div>

<style>
.wrapper {
  border: 1px solid red;
  width: 200px;
}
.box {
  float: left;
  width: 100px;
  background: pink;
}
</style>

二、浮动使用场景

2.1、两栏布局

• 左侧固定宽度，右侧自适应

• http://js.jirengu.com/vefu/1/edit

• 右侧固定宽度，左侧自适应

• http://js.jirengu.com/lete/1/edit

2.2、三栏布局

• 简单的三栏布局

• http://js.jirengu.com/jawu/1/edit

导航条
• 左浮导航条

• http://js.jirengu.com/zece/1/edit

• 右浮导航条

• DOM顺序不变
• http://js.jirengu.com/nilu/1/edit

浮动副作用
• 对后续元素位置产生影响

• 查看案例 http://js.jirengu.com/sado/1/edit

• 父容器无法包裹子元素

• 查看案例 http://js.jirengu.com/towu/1/edit

三、清除浮动

让父亲包裹浮动子元素，减少对其他元素的影响

3.1、清除浮动-方法

• 方法

• clear: left
  • 要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的底边下方
• clear: right
  • 要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的底边下方
• clear: both
  • 要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒和右浮动盒的底边下方

• clear 属性举例

• 查看范例 http://js.jirengu.com/taja/1/edit
• 思考：对box2设置clear: right有效吗
  注意：移动的对象是自己，不是其他元素

• 使用如下代码

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

• 解决1：减少对其他元素影响
  • http://js.jirengu.com/vuju/1/edit?html,output

• 解决2： 让父亲包裹所有浮动元素
  • http://js.jirengu.com/towu/2/edit?html,output