CSS学习笔记（二）

一、两栏布局

两栏布局，即：左侧内容宽度自适应，右侧内容宽度固定，且两侧内容相邻而不重合。详见下图：在这里插入图片描述如上述代码所示，在两栏布局的时候，在html中必须先写需要用到定位的那一栏，否则会出错！如果将上图左侧html文档中的div调换位置，会出现以下两栏布局不成功的情况！

margin 塌陷
- ★定义★：父子嵌套的两个元素，垂直方向的margin会结合到一起，并取两者中的最大值。
- 解决方式：
  
  1）给父级元素设置一个上边框（1px…）--- 不能用
  
  2）bfc语法 --- block format context (块级格式化上下文) 在一个元素的父级的CSS中，应用上图中四种方式的任意一种，都能够触发此父级盒子的bfc语法。但需根据具体需求决定使用哪一种方法好，同时使其对周围元素产生的影响降到最小。
margin 合并
- ★定义★：两个兄弟结构元素在垂直方向上的margin是合并的。
- 解决方式：
  
  1）将其中一个兄弟元素或者将这两个兄弟元素都套在一个具有bfc语法规则的父级元素里（如下图）。--- 不好，不用（因为在实际开发中，不能因为解决某个BUG而改变HTML结构） 2）此bug可以不解决，只需要知道此BUG的存在，并且在设置margin值时注意一下就行。 （如：在上图的代码中，只设置 demo1的下边距或 demo2的上边距为150px，就可以避免引发此BUG。)

应用 float 属性的前后对比 1）没有设置 float 属性时： 2）设置了 float 属性时：
float属性的值 left 和 right 的区别
★浮动元素会产生浮动流★ 对于所有产生了浮动流的元素：①块级元素看不到它们；②产生了 bfc 的元素、具有文本类属性(inline)的元素和文本都能看到浮动元素。
【注意】
1. 上述问题还可以通过触发浮动元素的父级元素的bfc 来解决。但是，通过伪元素来解决是最常用的，也是效果最好的。
2. 凡是设置了position: absolute; 或 float: left / right; 的元素，系统会打内部把元素转换成inline-block，这时会由该元素的内容撑开它的宽高。
float 属性也可以用来实现“报纸式”环绕布局