CSS初级篇—两栏布局、BFC及两个经典bug、浮动模型

两栏布局

众所周知，div属于块级元素，其特点是独占一行，那么如何让两个div并到一排呢？因此我们需要用到我们上章讲到的定位来实现这个效果。

//html代码
<div class="right"></div>
<div class="left"></div>

//css代码
.right{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #fcc;
}
.left {
    height: 100px;
    background-color: #123;
}

效果如下：

在这里我们可以看到这样就使得两个div同在一行
以上效果演示的是通过定位改变了层级使得效果上在同一行，那么如何让他们在同一行都只有属于自己的空间呢？

//html代码
<div class="right"></div>
<div class="left"></div>

//css代码
.right{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #fcc;
    right：0;
    opacity：0.5/*降低透明度*/
}
.left {
	margin-left：100px;
    height: 100px;
    background-color: #123;
}

效果如下：

注意:HTML中的两个div不能调换位置，即必须先写定位元素的div
调换位置的效果如下:

---

BFC(Block Format Context)——块级格式化上下文

CSS把HTML中的每一个元素当成每一个盒子，而且每一个盒子里面都有一套自己的渲染规则。
BFC则是通过一些特定的手段来改变盒子里面的渲染规则，使得和原来的规则不一样，即特定的盒子遵循另一套规则。

如何触发BFC

1. position：absolute;
2. display：inline-block;
3. float：left/right;
4. overflow：hidden;

Margin塌陷和Margin合并

//HTML代码
<div class="wrapper">
    <div class="content"></div>
</div>

//CSS代码
.wrapper {
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
.content {
    margin-left: 50px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: green;
}

效果如下：

由效果图看出，子级css样式中的margin-top：50px;并没有使得其相对于父级元素向下移动50px。

我们不妨尝试将50px调整为150px来看看效果

由此我们可以看出，依然没有与我们设想的一样，反而将父级元素与子级元素同时下降了50px,即当子元素垂直方向的margin大于父元素的margin时，则两者相结合为一个整体，取最大垂直方向margin。
因此我们该如何解决这个问题呢？
方法一:

//在父级元素中添加
.wrapper {
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
    border-top: 1px solid red;
}

可以看到，轻松解决，但是并不推荐使用，手段过于残暴！！！

方法二:

/*在父级div中添加*/
.wrapper {
    margin-left:100px;
    margin-top:100px;
    width:100px;
    height:100px;
    background-color:black;
    /*overflow:hidden;*/
    /*display:inline-block;*/
    /*position:absolute;*/
}

使用此方法只能弥补margin塌陷并不能解决此类问题。

Margin合并

先来看一个案例

// HTML代码
<span class="box1">123</span>
<span class="box2">456</span>

// CSS代码
.box1{
    background-color: red;
    margin-right: 100px;
}
.box2{
    background-color: green;
    margin-left: 100px;
}

效果如下：

这种现象叫做区域不能共用现象。

// HTML代码
	<span class="box1">123</span>
    <span class="box2">456</span>
    <div class="demo1">1</div>
    <div class="demo2">2</div>

// CSS代码
.box1 {
    background-color: red;
    margin-right: 100px;
}

.box2 {
    background-color: green;
    margin-left: 100px;
}

.demo1{
    background-color: red;
    margin-bottom: 100px;

}
.demo2{
    background-color: green;
    margin-top: 100px;
}

效果如下：

*两个兄弟元素垂直方向的margin是合并的

解决方法如下:

<!--HTML代码 -->
	<span class="box1">123</span>
    <span class="box2">456</span>
    <div class="demo1">1</div>
    <!-- 创建能使用BFC的父级元素-->
    <div class="wrapper">
        <div class="demo2">2</div>
    </div>
    <!--或者这样也可以解决问题
    <div class="wrapper">
    	<div class="demo1">1</div>
    </div>
    <div class="wrapper">
        <div class="demo2">2</div>
    </div>
    -->

/*CSS代码*/
.box1 {
    background-color: red;
    margin-right: 100px;
}

.box2 {
    background-color: green;
    margin-left: 100px;
}

.demo1{
    background-color: red;
    margin-bottom: 100px;

}
.demo2{
    background-color: green;
    margin-top: 100px;
}
/*在父级元素中使用BFC*/
.wrapper {
    overflow:hidden;
}

创建一个父级元素，并在父级元素中触发使得整个变成BFC，由此可以解决问题

在开发过程中，Margin合并一般都不解决，可以通过数学计算将垂直方向的像素设置为自己想要的高度

浮动模型(float)

使用结构：
float：right/left;
主要作用就是将子元素进行排列

先看一个例子:

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

.wrapper {
    width:300px;
    height: 300px;
    border: 1px solid black;
}
.content {
	/*float: left;*/
    color: #fff;
    background-color: black;
    width: 100px;
    height: 100px;
}

效果如下:

在css中加入float:left;之后的效果如下：

总结:
1.浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
2.因为浮动流会对后面的元素产生影响，因此需要在尾部清除浮动流(clear:both;)来解决包裹浮动流问题
代码如下:

<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <p></p>
    </div>

.p{
    border-top: 10px solid green ;
    clear: both;
}

这种解决方式可以一劳永逸，每次都在容器的最后位置被包裹的元素撑开。当然还有其他的解决方法！就等待着你们去探索吧！

---

关注小编，和我一起自学前端！！！

阅读更多