CSS高级篇 - 两栏布局，两个经典BUG，BFC - 0626

1.两栏布局；HTML代码如下：

< body >

< div class= "right" ></ div >

< div class= "left" ></ div >

</ body >

对应CSS代码如下：

*{

margin: 0px;

padding: 0px;

}

div{

height: 30px;

}

.right{

position: absolute;

right: 0;

width: 50px;

/* height:60px; */

background-color:green;

opacity: 0.5;

}

.left{

/* height:60px; */

background-color:yellow;

margin-right: 50px;

}

设置透明度：opacity属性，其值可以赋：0~1之间；

2.两个经典的BUG

(1)margin塌陷

垂直方向上，父子两个元素的margin是结合在一起的；子级并未按照理论上按照父级的“顶，即上边线”向下窜，就好像它的父级元素的“棚”塌了；

问题表现如下：

< body >

< div class= "wrapper" >

< div class= "content" ></ div >

</ div >

</ body >

对应CSS代码如下：

*{

margin: 0px;

padding: 0px;

}

.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;

}

在浏览器控制台中可以看到，子级的“顶，或称为棚”并非是父级的上边框线，而直接出去了。

解决方法一：可以给父级元素上增加一个border-top : 1px solid black；

解决方法二：BFC，block format context，块级格式化上下文。正常来说，HTML中每一个盒子的渲染规则都是一定的，特定的，但是在一些特殊的盒子中，你可以触发BFC语法，使得这个盒子所符合的语法规则和原来不一样；

如何触发一个盒子的BFC？有四种方法均可以触发，如下：(1)position：absolute；(2)display : inline-block；(3)float : left/right；(4)overflow : hidden；

*{

margin: 0px;

padding: 0px;

}

.wrapper{

margin-left: 100px;

margin-top: 100px;

width: 100px;

height: 100px;

background-color:black;

overflow: hidden;

}

.content{

margin-left: 50px;

margin-top: 50px;

width: 50px;

height: 50px;

background-color:green;

}

这个BUG并没有完美的方法完整解决，它只能在一定程度上环节或弥补这个问题；

(2)margin合并；

区域不能公用；两个兄弟结构的元素，它们在垂直方向上的margin-top距离是合并的；解决方法，让它两个处于BFC环境下，给它们两个添加一个父级，把它们放在BFC语法规则里面，这个问题就解决了；这个问题在真实开发中是不解决的，是允许存在的；

3.浮动模型，float：left/right；这是除盒模型，层模型之外的第三个模型；

浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性的元素（凡是带有inline属性的元素，均是文本类属性元素）以及文本都能看到浮动元素；

它本身没有产生分层；虽然表面上感觉像是产生了分层情况；

<div>标签的宽高在没有设置的情况下，是可以自适应的，有内部的内容将其撑起来；父级包住浮动元素的一个方法；

如何将浮动流干掉？clear属性，取值可以为left，right，以及both；

比如增加<p>元素，如下：

p{

border-top: 0 silid green;

clear: both;

}