目录
2、块级格式化上下文BFC（Block Formating Context）
一、盒子模型（Box Model）
如果我们用CSS进行网页布局时，不可避免地会碰到盒子模型。如果把网页比作一个容器，那么HTML元素（element）就是一个个的盒子，盒子里装的就是HTML元素的内容。盒子模型规定了元素框处理元素内容、内边距、边框和外边距的的方式，简单来说，就是描述一个盒子（HTML元素）和外界容器以及内部的内容之间的关系。它是一个局部布局。
1、盒子的组成
1）margin（外边距）——CSS属性，表示的是边框到外界容器之间的距离
2）border（边框）——CSS属性
3）padding（内边距）——CSS属性，表示的是边框到内部内容之间的距离
4）content（内容）——它是HTML元素中的内容，但它不是CSS属性
2、 浅析盒子模型的CSS属性
1）margin（这个属性接受任何长度单位、百分数值甚至负值）
盒子的外边框，完全透明的，开发者只能设置它的边距
- margin-top：设置元素的上外边距
- margin-bottom：设置元素的下外边距
- margin-left：设置元素的左外边距
- margin-right：设置元素的右外边距
举个例子：
p{
margin-top: 100px;/*如果margin-top的值是负数，边框会向上移动*/
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;
}如果将其简化为一条，可以按照从上外边距（top）开始围着元素顺时针旋转的顺序进行简写，那样上例就会变成：
p{margin:100px 200px 300px 400px;}2）padding
盒子的内边距（填充）。它可以设置背景颜色和图片，不是完全透明的。与margin类似的是，padding可以设置每一条边的边距，所以有padding-top、padding-bottom、padding-left、padding-right，设置方法与margin相同，不再赘述
3）border
盒子的边界，可以将它设置成各种样式、样式、宽度
- border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式
- border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边框设置宽度
- border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色
- border-radius：边界的四个角的半径，可以用百分值和像素值将它们设置为带弧度的
我们用链接来举个例子：
<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>下面的样式，我们设置链接访问前和访问后的样式为5px实线的不可见边框，鼠标悬停时样式为灰色边框
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}二、定位（Positioning）
CSS通过定位和浮动提供了一些可以建立列式布局的属性，它解放了多年来使用的表格布局任务。首先我们要了解，CSS中有三种定位机制，包括普通流、浮动和定位。
普通流中，元素自左上向右下排列。如果元素是块级元素（block，比如div、h1 或 p 元素等），那么块级元素可以嵌套其它块级元素或者行内元素，但是它自带换行符，必须自己独占一行，可以通过属性设置宽和高。如果元素是行内元素（inline,比如span 和 strong 等元素），那么它只能嵌套行内元素，可以与其它元素同处一行，不可以设置宽和高。一个萝卜一个坑，一个框一个位置，块级元素自己占一行或多行，行内元素可以和其它元素占一行。
浮动就是萝卜不在坑里呆着了，它可以左右移动甚至转到下一行。浮动的元素不可以溢出浏览器的边框，可以被其他元素的边缘阻止移动，如果无法容纳所有的浮动元素，那就移动到下一行。
定位则是通过position属性定义布局，它可以继承父元素的position属性，有四个值：static（默认值，没有定位）、absolute（相对于最近的且不是static定位的父元素的绝对定位）、relative（相对于其原有位置的相对定位）、fixed（相对于浏览器窗口的绝对定位，不会随屏幕滚动）、inherit（继承父元素的position值）。
1、了解浮动
属性float的有三个值：left、right、none。如果想清理元素左右两侧的浮动元素，可以使用clear:both;这条语句。clear的默认值是none，可以使浮动元素出现在两侧。上面我们已经对浮动有了大致的了解，下面我们用几个例子来了解浮动
1）排列
我们用排列123的方式来演示一下浮动到底能起什么作用。123可以有六种排列方式：
a、排列方式123
<head>
<style>
.left{
float:left;
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="left">1</div>
</div>
<div class="left">
<div class="left">2</div>
<div class="left">3</div>
</div>
</div>
</body>效果图为 ：
b、排列方式213
<head>
<style>
.right{
float:right;
}
.left{
float:left;
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="right">1</div>
<div class="left">2</div>
</div>
<div class="left">
<div class="left">3</div>
</div>
</div>
</body>效果图为：
c、排列方式231
<head>
<style>
.right{
float:right;
}
.left{
float:left;
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="left">2</div>
</div>
<div class="right">
<div class="left">3</div>
<div class="right">1</div>
</div>
</div>
</body>效果图为：
其它排列方式大致相同，不再赘述。
2）高度塌陷
高度塌陷其实就是父元素高度自适应，子元素设置为浮动之后，父元素高度为0。
那么如何解决高度塌陷问题呢？
方案1：在浮动元素的后面建立一个空的div，空的div的样式是clear:both；这是所有浏览器都支持的方法，而且容器溢出不会被裁剪，但是页面添加一个没有意义的div，会造成代码冗余
<head>
<style>
.content {
background: pink;
}
.float{
width: 50px;
height: 50px;
float:left;
background: tan;
}
.clearfix{
clear: both;
height:0;
overflow:hidden;
}
</style>
</head>
<body>
<div class="content">
<div class="float">
</div>
<div class="clearfix"></div>
<!--用于清除浮动的元素必须是块级元素-->
</div>
</body>方案2：可以给父元素一个高度，但是这样就违背了父元素高度自适应的原则，所以也不推荐使用。
方案3：父元素设置overflow：hidden；属性，这个办法很简单，但是子元素有定位属性的时候，父容器以外的子元素内容会被裁剪。
方案4：这是一个推荐使用的方法，不会造成代码冗余，在父元素内容的最后添加一个伪元素，它的样式如下：
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}2、块级格式化上下文BFC（Block Formating Context）
overflow:hidden；的作用
a、隐藏溢出的部分：如果子块级元素的大小超过了父块级元素，超过的部分就会被隐藏
b、建立一个相对密闭的空间：解决外边距合并问题
用两个盒子举个例子：
<body>
<div class="box1">
盒子1
</div>
<div class="box2">
盒子2
</div>
</body>我们给它设定样式：两个长宽为100像素的盒子，盒子1的下外边距为100像素，盒子2的上外边距为100像素，我们想要的效果是两个盒子上下垂直排列，中间的有200像素的空白区域。
.box1,.box2{
width:100px;
height:100px;
}
.box1{
background-color: green;
margin-bottom:100px;
}
.box2{
background-color: red;
margin-top:100px;
}效果图如下图。盒子1和盒子2之间空白区域的距离只有100像素，好像和我们想要的额效果不太一样，那剩下的100像素去哪里了呢？这里我们引入外边距合并的概念。当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。也就是说，如果盒子1的下外边距为200像素，盒子2的上外边距为100像素的话，那么两个盒子中间的空白区域距离会是200像素。
怎样才能解决外边距合并问题呢？在CSS样式中用overflow:hidden；来解决外边距合并问题：
.box1,.box2{
width:100px;
height:100px;
}
.box1{
background-color: green;
margin-bottom: 100px;
}
.box2{
background-color: red;
margin-top: 100px;
}
.row{
overflow: hidden;
}这时HTML文件是这样的。将每一个盒子设置成一个封闭的空间。
<div class="row">
<div class="box1">
盒子1
</div>
</div>
<div class="row">
<div class="box2">
盒子2
</div>
</div>效果图如下图。外边距合并问题解决了，盒子1和盒子2之间的垂直距离为200像素。
c、消除浮动带来的影响：它的效果等同于clear:both;给块级元素一个独立的空间，把所有的浮动影响都清除掉，元素可以按照自己的规则进行布局
3、了解定位
1）相对定位
相对定位以普通流为基准，在其应该在普通流位置的基础上发生移动，它不破坏普通流，其它元素不会变化
举个例子：
<head>
<style>
.box1,.box2{
width:100px;
height:100px;
}
.box1{
background-color: green;
position:relative;
left: 20px;
}
.box2{
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>效果图为：
2）绝对定位
绝对定位以父类元素中不是static定位的元素为基准，其它元素会忽略这个绝对定位元素的存在，显而易见，它会破坏普通流
上面的例子我们更改一下样式：
.box1{
background-color: green;
position:absolute;
left: 20px;/*向右移动*/
}效果图为：
