宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
（1）宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
（2）元素具备最小高度的自适应
min-height属性：最小高度；
说明：IE6浏览器不识别该属性，height属性在IE6里就类似min-height作用。
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value;
min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注：IE6及以下版本不识别该组属性
（3）高度自适应
1)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
需要自适应的元素： height:100%;
2)自适应元素高度：
父元素：height：value；
需要自适应父元素高度的子元素： height:100%;
height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
background-size: length|percentage|cover|contain;
Length：设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
Percentage：以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
Contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
（4）浮动元素父元素高度自适应（高度塌陷）
hack1：给父元素添加声明overflow:hidden;
hack2：在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden(font-size:0;)
hack3：万能清除浮动法
:after {content:”.”; display:block; height:0; visibility:hidden; clear:both; }*visibility:hidden/visible;隐藏/可见
*visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。
1）:after:与content属性一起使用，定义在对象后的内容。
如：div:after{content:url(logo.jpg);}
div:after{content:”文本内容”;}
2）:before:与content属性一起使用，定义在对象前的内容。
如：div:before{content:”在其前放内容”;}
3）:first-letter:定义对象内第一个字符的样式。
说明：该伪元素只能用于块级元素。
4）:first-line:定义对象内第一行的样式。
说明：该伪元素只能用于块级元素。
*ie6以下版本浏览器不支持伪对象选择符。
BFC概念
一、什么是BFC
Box和Formatting Context
1、B: BOX即盒子，页面的基本构成元素。分为 inline （行内）、 block（块级） 和run-in（可变）三种类型的BOX
2、FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)BFC 定义
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块级盒子）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC布局规则
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算
二、哪些元素会生成BFC
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
三、BFC的作用及原理
1、自适应两栏（三栏）布局
2、清除内部浮动
3、防止 margin 重叠