两栏布局，两大经典bug

1.div页面居中： 定位+left top 50%+margin-left margin-top 负的div宽高

2.两栏布局：

右边绝对定位脱离文档流，左边就上去了，再利用据右边距离来调节定位元素的位置，在把下面排到上面的把定位元素的宽空出来

3.margin塌陷  加入了css

垂直方向父子元素margin取最大的一个margin-top作为他俩的margin-top值

第一种解决方案：给父元素加一个边框，子元素就能相对于父元素来进行margin-top了

效果如下：

margin塌陷  只能说是弥补，但解决不了，根据需求选择

bfc    block  format  context  块级格式化上下文

css把每一个元素都当成一个盒子，每个盒子都有自己的渲染规则，根据你写的代码能绘制出来

bfc语法能改变个别盒子的渲染规则，遵循另一套渲染规则，只改变一丁点  解决了margin塌陷 

如何触发盒子的bfc：让父级变成bfc，内部采用bfc语法

position ：absolute

display：inline-block

float：left/right

overflow：hidden

4.margin合并    加入了html 和css  一般不解决

区域不能共用

兄弟元素垂直方向上margin合并  解决办法将兄弟两个其中一个或者是全部放在一个具有bfc语法的盒子里面

5.模型

盒模型    层模型  浮动模型

浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到，

产生了bfc的元素和文本类属性（带inline属性的）的元素以及文本都能看到浮动元素

p逻辑上在就行，可以没有高度

css选择器

伪元素是行级元素

能清除浮动的必须是块级元素 

清除浮动要把父级元素变成bfc语法的元素

行内块元素宽高由内容决定

去掉ul里面li的小圆点

#424242标准的黑色

  font-family：    arial标准字体

每次用完浮动就要清除一下：