css013 构建基于浮动的布局
基于浮动的布局时利用float属性是网页上的元素并排，并创建列
float有三个值：left 、right 、none
1、假设要把一张图片浮动到网页的左侧
.float-left{
float:eft;
}
假如要把一个装满内容的<div>浮动到一边，形成一个侧边栏
.sidebar{
float:left;
width:150px;
}
2、设计一个简单的两列布局需要的几个步骤
a、 把每列都包在一个带有ID或class属性的<div>标签里面
b、把侧边栏<div>浮动到左侧或者右侧
c、 给浮动的侧边栏设定一个宽度
宽度可以是一个固定的尺寸，也可以是基于浏览器窗口宽度的弹性设置，使用百分比。
d、 给正文添加一个margin-left
（要仔细弄明白了）
一、 用浮动进行布局
1、让所有的列都浮动让所有的列浮动时要注意每一列的宽度，列宽度总和应该小于总宽度
2、在浮动元素中浮动
3、在浮动元素中浮动
二、 克服浮动问题
1、清除浮动和保持浮动
a、 在<div>的底部添加一个清除元素
b、浮动外围元素：让浮动元素的<div>也浮动起来
c、 利用overflow:hidden; (如果容器中有绝对定位的元素，它们可能会显示不出来。例如：当一个下拉菜单中有另一个标签或者下拉菜单时，就会显示不出来)
d、 使用Mico Clear Fix
利用html分区元素，添加一个类，如：
<div class=”clear”>
在css中写：
.clear{
clear:both;
}
2、多列布局
三、 多列的布局
1、设置列项目：column-count
设置列列之间的间隔：column-gap
在列之间绘制一条直线：column-rule
如：给这个类定义一个名为：multicol的类，创建一个3列的布局，间隔为1em ，并添加一条黑色的虚线
. multicol{
column-count:3;
column-gap:1em;
column-rule:1px dotted black;
}
3、创建全网页高度的列
假设有个3列的设计，第一列为25%宽，第二列有50%，第三列有25%。你想让背景色为红白蓝。
<div class="wrapper">
<div class="sidebar1">hello everyone!</div>
<div class="main">i am the main content</div>
<div class="sidebar2">nice to meet you!</div>
</div>
添加一个线性渐变，让颜色站与列的宽度相匹配
.wrapper{
background-color: linear-gradient(left,
red:0%,
red:25%,
white:25%,
white:75%,
blue:75%,
blue:100%);
}
添加供应商版本的代码：
……
4、防止浮动下落
浮动下落（float drop）总是犹豫没有组否的空间容纳所有的列才造成的
5、用box-sizing防止浮动下落
box-sizing的三个值分别如下：
a、 content-box
b、 box-sizing：content-box
屏幕宽度为width属性值+padding值+border值
c、 padding-box
box-sizing：padding-box
屏幕宽度为width属性值+padding值
d、 border-box
box-sizing：border-box
屏幕宽度为width属性值+border值