首页手记学习张鑫旭前辈课程的有关笔记（二）

学习张鑫旭前辈课程的有关笔记（二）

标签：

Html/CSS CSS3 设计

上一篇手记是第一部分，共5个属性，接下来的这篇，是另外5个属性。
同样，仅作为大家观看张鑫旭前辈视频的参考文档。作为查阅文档也是可以的。

《深入理解vertical-align》

vertical-align支持的属性以及组成：
    1、线类：baseline、top、middle、bottom
    2、文本类：text-top、text-bottom
    3、上标下标类：sub、super
    4、数值百分比类：20px、2em、20% ……
        共性：都带数字、都支持负值、行为表现一致（在baseline对齐基础上上下偏移对应数值大小）
        差异：vertical-align的百分比值是相对于line-height计算的（IE6/7下vertical-align百分比值不支持小数line-height）
vertical-align起作用的前提：只能应用于 inline水平 以及 'table-cell' 元素（默认状态下，也即 图片、按钮、文字、单元格 支持vertical-align）
    inline水平：
        inline：<img>、<span>、<strong>、<em>、未知元素 ...
        inline-block：<input>(IE8+)、<button>(IE8+) ...
    'table-cell' 元素：
        table-cell：<td>
display：能更改元素的显示水平
    例如把一张图片设置为 display: block; 后，vertical-align即失效
某些CSS声明：能间接更改元素的显示水平
    例如把一张图片设置为 float: left; 或 position: absolute; 后，会使图片block水平化，从而vertical-align失效
使图片在父级(block水平)元素中垂直居中：
    1、将父级元素的 line-height 设置为父级元素的高度大小，然后再为图片设置 vertical-align: middle; 即可
    2、对父级元素设置 display: table-cell; vertical-align: middle; 即可（起作用的是table-cell本身）
实现多行文字与图片的垂直居中：
    包裹文本的元素设置 display: inline-block; vertical-align: middle; 图片设置 vertical-align: middle;
对于内联元素，vertical-align与line-height虽然看不见，但实际上到处都是！（一对好基友）
如何去掉图片与容器的底部间隔：
    1、图片block水平化（ 使vertical-align失效 ）
    2、改变图片的默认对齐方式（ 对图片设置vertical-align: bottom/middle/top; ）
    3、改变容器的行高（ 设置line-height: 0; ）
    4、改变容器的字体大小（ 设置font-size: 0; 即间接改变容器的行高 ）
实现图片相对于容器的近似居中：
    容器的line-height设置为容器的高度（比图片的高度值要大），图片设置 vertical-align: middle; 即可
使一个空的兄弟内联结点不撑开图片与容器底部的距离：
    对容器设置：line-height: 0; 对空的兄弟元素设置：vertical-align: top;
当line-height为0时，文字与容器的位置关系：
    1、行高为0，则文字字符占据容器的高度也就变为0了
    2、行高是决定文字的中心的，因此文字的高度也就移到了文字的中心
    3、文字的高度就是它在容器的位置，因此文字的高度会出现在容器的顶部（为0了嘛）
    4、此时，基线继续在文字的底部（inline-block元素默认的是基线对齐哦）
inline-block水平元素的默认基线位置：
    1、当元素完全没有内容时，它的基线是容器的底部边沿
    2、它的基线是里面的 inline box 的最后一行的基线
为inline-block水平的空的 span 为什么撑开了一段高度？
    原因：与span在同一行的空白字符(摸不着的)的高度为0，但由于字体大小的原因，该空白字符的基线（字体底部）离字符中心为1/2字体大小的高度，
          而span为空元素
因此必须与该空白字符基线对齐，从而把容器的底部撑开了1/2字体大小的高度
为inline-block水平的非空的 span 为什么不撑开高度了？
    原因：该span的基线在拥有内容后不再是底部边沿，而是与 line box 的基线一致了，由于其高度为0（因为line-height为0），line-height
vertical-align: bottom; 的作用：
    在inline/inline-block水平元素中：使当前元素与整行 inline box 的底部对齐（inline box的其他内容则是baseline对齐）
    在table-cell元素中：单元格底padding边缘和表格行的底部对齐
vertical-align: top; 的作用：
    与vertical-align: bottom; 的作用刚好相对
vertical-align: middle; 的作用：
    1、inline/inline-block元素：元素的垂直中心点和父元素基线上1/2的 字符的高度 处对齐
    2、table-cell元素：单元格填充盒子相对于外面的表格行居中对齐(td单元格不足高度会用padding填补)
如何利用vertical-align实现图片的完全的垂直居中：
    容器设置 line-height: 某个大于图片高度的值; font-size: 0; 图片设置：vertical-align:middle;
vertical-align: text-top;
    inline盒子的顶部和父级 content area 的顶部对齐。（一定要注意：是父级的font-size的大小的content area区域！）
vertical-align: text-bottom;
    inline盒子的底部和父级 content area 的底部对齐。（与行高没有任何关系，至于父级的font-size有关）
text-top、text-bottom的作用：
    用于定位固定大小的图标，以避免其受到行高或其他内联元素的影响
vertical-align: super
    提高盒子(本内联盒子)的基线到父级合适的上标基线位置
vertical-align: sub
    降低盒子的基线到父级合适的下标基线位置
相邻元素不同的vertical-align的行为表现：
    关于 top 和 bottom：    
        对方可能受到高度最大的元素的影响，但并没有直接的影响，你对齐底部，我对齐顶部，互不干扰，没有关联
    关于 text-top 和 text-bottom：
        对方受到父级元素font-size大小的影响，相互之间并没有关联，请参照 vertical-align: text-top/text-bottom; 的讲解
如何使带有文字内容的容器的图片完全垂直居中：
    把文字放置到一个span标签中，img 和 span 都设置 vertical-align: middle; 而父元素设置一个大于图片高度的line-height即可
text-bottom与baseline：
    一个inline元素设置了 vertical-align: text-bottom; 后，它所对齐的content-area的底部是inline-box的content-area的底部
    不要被另外设置了 vertical-align 的其他的inline元素影响了你对第一个inline元素的位置的判断！因为inline-box可能暂时是空的
    但其所占的空间确实存在！
vertical-align到底如何影响元素：
    切记，它只与当前元素和父级元素有关。与前后其他内联元素无任何关系！（不要被元素的相邻元素干扰对vertical-align的理解）
实现小图标与文字的居中对齐：
    为小图标设置一个合适的 vertical-align 负值即可（兼容性较好）
如何实现一张图片自适应垂直居中
    <p><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.jpg"/><i></i></p>
    html,body{ height: 100%; }
    p{ height: 100%; }
    img{ vertical-align: middle; }
    i{ display: inline-block; height: 100%; vertical-align: middle; }
如何实现多行文字自适应垂直居中
    <p><span>很多标签或文字内容</span><i></i></p>
    html,body{ height: 100%; }
    p{ height: 100%; }
    span{ display: inline-block; vertical-align: middle; }
    i{ display: inline-block; height: 100%; vertical-align: middle; }

《深入理解line-height》

line-height，行高，两行文字基线之间的距离
基线：请参考小学英语作业本的书写线条，倒数第二条(红色的那条)就是基线
为啥是基线：因为基线是顶线、中线、底线定义的根本（另外，不同的语言、字体，基线也是不一样的）
所有内联元素的样式表现都与行内框盒子模型有关！
行内框盒子模型：
    1、“内容区域”(content area)，是一种围绕着文字却看不见的盒子。“内容区域”的大小与font-size有关。
       （查看方式：选中一段文字时所看见的背景颜色区域便是该段文字的内容区域）
    2、“内联盒子”(inline boxes)，“内联盒子”不会让内容成块显示，而是排成一行。如果外部含inline水平的标签（span、a、em等），则属于“内联盒子”。
       “匿名内联盒子”，如果外部是个光秃秃的文字（没有span、a、em等包裹），则属于“匿名内联盒子”。
    3、“行框盒子”(line boxes)，每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成。
    4、“包含盒子”(containing box)，block水平标签，此盒子由一行一行的“行框盒子”组成。
其中、4包含3，3包含2，2和1关系说不清。
内联元素的高度是由行高决定的。
拥有单行文本的block水平标签为啥其高度等于行高：
    1、行高由于其继承性，影响无处不在，即使单行文本也不例外；
    2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。
内容区域高度(content area) + 行间距(vertical spacing) = 行高(line-height)
内容区域的特性：
    1、内容区域高度只与字号(font-size)以及字体(font-family)有关，与line-height没有任何关系。
    2、在宋体字体下，内容区域高度等于字体大小值。（此时 font-size + 行间距 = line-height）
行间距：是上下均分的。行半间距 = (行度 - 内容区域高度)/2
总结：
    1、行高决定内联盒子高度；
    2、行间距墙头草，可大可小(甚至负值)，保证高度正好等同于行高。
多行文本的高度就是单行文本高度的累加。
如果行框盒子里面有多个不同行高的内联盒子，通常情况下，行框盒子的高度等于最高的那个内联盒子的高度（如果该内联盒子使用了vertical-align等属性，则不成立）
line-height支持属性：
    1、normal：与元素字体、用户的浏览器相关联（具有不确定性）。
    2、<number>：例如 1.5 ，根据当前元素的font-size大小进行计算。
    3、<length>：例如 1.5em、1.5rem、20px、20pt ，使用具体长度作为行高值。
    4、<percent>：例如 150% ，相对于设置了该元素的font-size大小进行计算。
    5、inherit ，行高继承。（IE8+）
行高默认有继承性，但在 input 等元素下元素的默认行高是normal，使用inherit可让文本框样式可控性更强。
那么， 1.5 1.5em 150% 的区别是什么？
    计算无差别！差别在于子元素如果不声明line-height时：
        1.5 是所有可继承元素根据font-size重计算行高的。（子元素会根据 1.5 进行重计算）
        150%、1.5em 是根据当前元素根据font-size计算行高的，会继承给下面的元素。（子元素不会重计算，直接继承父元素的行高）
body全局数值行高使用经验：
    body{ font-size: 14px; line-height: 1.4286; }
    原因：匹配20像素，方便心算。
    line-height = 20px / 14px = 1.42857...
行高与图片实际占据高度的关系：
    行高不会影响图片的实际占据高度。
隐匿文本结点：
    例如 <p style="text-align:center;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.jpg" style="position:absolute;"></p>
    图片的左边处于 p 标签的中心，说明 p 标签里面有一个隐匿的文本结点
    例如 <p style="background:#CCCCCC;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.jpg"></p>
    图片与p标签的底边有一段间隙，说明图片的右侧有一个隐匿的文本结点
消除图片底部间隙的方法：
    1、图片块状化—— img{ display: block; }
    2、图片底部对齐—— img{ vertical-align: bottom; }
    3、盒子行高足够小—— .box{ line-height: 0; }
line-height的实际应用：
    1、图片的水平垂直居中（IE8+）
        .box{ line-height: 300px; text-align: center; }
        .box > img{ vertical-align: middle; }
    2、多行文本水平垂直居中（IE8+）
        .box{ line-height: 250px; text-align: center; }
        .box > .text{ display: inline-block; line-height: normal; text-align: left; vertical-align: middle; }
    3、代替height，避免IE6/7下的 haslayout
        把 height: 36px; 改为 line-height: 36px;（注意，没有必要同时为元素添加相同大小的 height 和 line-height ，height在这里是多余的）

《深入理解overflow》

overflow基本属性值：
    1、visible（默认，正常显示超出的内容）
    2、hidden（隐藏超出的部分）
    3、scroll（直接添加滚动条）
    4、auto（不超出容器时，正常显示，一旦超出容器后则显示滚动条）
    5、inherit（IE8+）
overflow-x、overflow-y：
如果overflow-x与overflow-y的值相同，则两者加起来等同于overflow
如果它们的值不相同，要是其中一个被设置成hidden或scroll或auto，另外一个被设置为visible，则visible会被重置为auto
如何才能让overflow起作用：
    1、元素非 display: inline; 水平
    2、元素要有对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸 等。
overflow: visible;的妙用：
    BUG来源：IE7浏览器下，文字越多，按钮两侧padding留白就越大
    解决办法：给所有按钮添加CSS样式 overflow: visible; 即可
滚动条出现的条件：
    1、<html><textarea>天生拥有 overflow: scroll/auto; 属性
    2、元素被设置了 overflow: auto; 或 overflow: scroll; 属性，而且内容超出了元素的尺寸限制
滚动条的来源：
    无论什么浏览器，默认滚动条均来自 <html> ，而不是 <body>（原因：<body>默认拥有 0.5em 的 margin 值）
JS获取滚动高度
    Chrome浏览器：document.body.scrollTop;
    其他浏览器是：document.documentElement.scrollTop;
    因此，计算公式应为：var st = document.documentElement.scrollTop || document.body.scrollTop;
overflow的padding-bottom缺失现象（非Chrome浏览器）：
    危害：会导致不一样的scrollHeight（元素内容高度）
滚动条的宽度机制：
    影响：滚动条会占用容器的可用宽度或高度
水平居中跳动问题的修复
    1、html{ overflow-y: scroll; }
    2、.container{ padding-left: calc(100vw - 100%); }（.container是所有内容的大容器）（IE9+）
       100vw：浏览器宽度； 100%：可用内容宽度
Chrome浏览器下自定义滚动条：
    ::-webkit-scrollbar{ width: 8px; height: 8px; }（滚动条宽度）
    ::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,.3); border-radius: 6px; }（滚动条）
    ::-webkit-scrollbar-track{ background-color: #DDDDDD; border-radius: 6px; }（背景槽）
BFC（Block Formatting Context）块级格式上下文
    作用：避免内部元素对外部元素产生影响，例如浮动导致父元素的塌陷、子元素margin穿透问题
    能触发BFC的overflow属性：auto、scroll、hidden
    内部浮动无影响
        .clearfix{ overflow: hidden; _zoom: 1; }
    然，通过overflow清除浮动的副作用明显，因此通用的清楚浮动的影响写法如下：
        .clearfix{ *zoom: 1; }
        .clearfix:after{ content: ''; display: table; clear: both; }
    overflow与两栏自适应布局
        img.left{ float: left; }
        div.right{ overflow: scroll/auto/hidden; }（在这种情况下，div中的内容相对于img.left使用.clearfix无效，这就是BFC化）
    因此，使用padding做流体自适应布局时，千万别让自适应BFC化（例如使用overflow: hidden;）
各种BFC属性的特性与表现：
    overflow: hidden;   自适应，但“溢出不可见”限制应用场景
    float + float       包裹性 + 破坏性，无法自适应，块状浮动布局
    position: absolute  脱离文档流，自娱自乐
    display: inline-block   包裹性，无法自适应; IE6/7下，block水平无法识别
    display: table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应
实现两栏自适应布局的通用写法：
    .cell{
        display: table-cell; width: 2000px; //IE8+ BFC特性
        *display: inline-block; *width: auto;   //IE7- 伪BFC特性
    }
overflow与绝对定位
    overflow: hidden; 失效：元素设置了 position: absolute;
    overflow: auto; 滚动失效：元素设置了 position: absolute;
绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。
    （包含块指“含position:relative/absolute/fixed;声明的父级元素，没有则上溯到body元素”）
如何避免overflow失效：
    1、overflow元素自身为包含块；
    2、overflow元素的子元素（该子元素为绝对定位元素的父级）为包含块；
    3、任意合法transform声明当作包含块。
        overflow元素自身transform（IE9+/FireFox支持，其余浏览器均不支持）
        overflow元素的子元素transform（IE9+的所有浏览器均支持）
overflow失效的妙用：实现元素的右侧自适应固定定位
    <div class="father">&nbsp;<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.png" class="child"/></div>
    .father{ height: 0; overflow: hidden; text-align: right; }  .child{ position: absolute; }
依赖于overflow的样式表现
    resize: both/horizontal/vertical;（此声明起作用的前提：元素的overflow属性值不能是visible）
        resize拖拽区域的大小是 17px * 17px （也就是滚动条的尺寸）
    text-overflow: ellipsis; ellipsis文字溢出...省略（此声明起作用的前提：元素设置了overflow:hidden;）
overflow与锚点技术
    锚点定位的条件
        1、容器可滚动（overflow不能为visible）
        2、锚点元素在容器内
    锚点定位的本质
        改变容器的滚动高度
    锚点定位的触发
        1、url地址中的锚链与锚点元素；
        2、可focus的锚点元素处于focus态。（请参考表单元素的tab跳转）
    使用场景
        单页面应用的选项卡技术

《深入理解absolute》

absolute与float的兄弟关系：
    1、都具有包裹性（父元素应用绝对定位后，父元素的宽度会收缩，但保持包裹住子元素的状态）
    2、都具有破坏性（子元素应用绝对定位后，父元素的高度会塌陷）
absolute与relative：
    当子元素只是浮动到父元素的左上角（left:0; top:0;）处时，父元素不必设置 position: relative; ，子元素直接设置 position: absolute; 就可以了
无依赖的absolute定位：
    不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值（即只是悬浮在原来位置的z轴的上方）
位置跟随
    如果元素是block水平的，当应用了absolute绝对定位后，依然是换行显示的。（即前面的文字不会被挡住。IE8+支持，IE7的修复办法：在绝对定位外面套一层空div即可）
    如果元素是inline/inline-block水平的，当应用了absolute绝对定位后，依然保持在前面文字的后面
    （另外，在Chrome浏览器下，当元素设置了absolute定位后，再改变元素的display属性为inline/block时，页面不会重新渲染）
图标定位（无依赖绝对定位）
    <a href="#">链接<i class="icon"></i></a>  .icon{ position: absolute; margin-top: -10px; background: url(...); height: 10px; width: 10px; }
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url"><!----><i class="tip"></i>   .tip{ position: absolute; width: 10px; height: 10px; margin-left: -10px; background: url(...); }
    应用的原理：位置跟随。
    关键点：“链接”或“<!---->”与<i></i>之间不能存在空格或换行
下拉框定位（无依赖绝对定位）
    <div class="parent"><ul class="slide-down"><li>1</li><li>2</li></ul><input /><a>搜索</a></div>
    input,a{ height: 30px; }
    .slide-down{ position: absolute; margin-top: 30px; }
实现绝对定位的图片的水平居中（并非最佳实践）
    <div>&nbsp;<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url"/></div>
    div{ text-align: center; height: 0; overflow: hidden; }
    img{ position: absolute; width: 30px; margin-left: -15px; }
实现右侧固定的链接
    <div class="fixed-father">&nbsp;<div class="fixed-children"><a href="#">1</><a href="#">2</><a href="#">3</></div></div>
    .fixed-father{ height: 0; text-align: right; }  .fixed-children{ display: inline; position: fixed; margin-left: 20px; }
    应用的原理：位置跟随。
*号提示的absolute化
    <label><span class="star">*</span>提示文字</label>
    .star{ position: absolute; margin-left: -1em; color: #FF0000; }
提示文字与小图标对齐
    <span class="tip"><i class="icon"></i>提示的文字</span>
    .tip{ position: absolute; line-height: 21px; }  .icon{ position: absolute; margin-left: -20px; width: 20px; height: 21px; display: inline-block; }
    优点：该提示在input框后面时，即使超出body的宽度，也不会换行。即保证内容在一行上显示。
回流与重绘
    原则：动画尽量作用在绝对定位元素上！
z-index无依赖
    1、如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；
    2、如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果（遵循后来居上原则），依然无z-index；
    3、如果多个绝对定位交错，利用 z-index: 1; 控制；
    4、如果非弹框类的绝对定位元素 z-index > 2 ，必定z-index冗余，请优化。
left/right/top/bottom与width/height的相互替代性（IE7+）
    例如
        position: absolute; left: 0; top: 0; width: 50%;
        position: absolute; left: 0; top: 0; right: 50%;
    又例如
        position: absolute; left: 0; right: 200px;
        position: absolute; left: 0; width: calc(100% - 200px); （calc是CSS3的特性，只有现代浏览器才支持）
    通常情况下
        元素的百分比height要想其起作用，需要父级容器的height值不为auto
    绝对定位拉伸下
        即使父级元素的height值是auto，只要容器绝对定位拉伸形成，百分比高度值也是支持的
        例如：.page{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .list{ float: left; height: 33.3%; width: 33.3%; position: relative; }
left/right/top/bottom与width/height的相互合作性
    width/height设置的尺寸 要优先于 left/right/top/bottom拉伸的尺寸
    当遭遇到 margin: auto; 时，两者的合作性即可得到体现：（IE8+）
    实现盒子的水平垂直居中：    .box{ position: absolute; left: 0; right: 0; top: 0; right: 0; width: 50%; height: 50%; margin: auto; }
absolute与整体布局
    1、body降级，子元素升级
    html,body{ height: 100%; }
    .page{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
    2、在 .page 里面，各模块（含头、尾、侧边栏）各居其位
    header,footer{ position: absolute; left: 0; right: 0; }
    header{ height: 48px; top: 0; }
    footer{ height: 52px; bottom: 0; }
    aside{ width: 250px; position: absolute; left: 0; top: 0; bottom: 0; }
    .content{ position: absolute; top: 48px; bottom: 52px; left: 250px; overflow: auto; }

《深入理解float》

float的设计初衷：
    仅仅是为了实现文字环绕效果
float的感性认知：
    包裹性：
        1、收缩：元素应用了float后，宽度收缩，紧紧地包裹住内容（即元素的宽度收缩到元素内的内容的宽度大小）
        2、坚挺：原来没有高度，但元素应用了float后，元素的高度突然扩展到内容的高度大小
        3、隔绝：元素应用了float后，盒子里面的内容发生了任何事情，都与盒子外的内容无关（BFC）
    破坏性：
        1、子元素应用了float后，父容器塌陷：父容器的高度变为0
具有包裹性（BFC特性）的其他属性：
    display: inline-block/table-cell
    position: absolute/fixed/sticky
    overflow: hidden/scroll
具有破坏性的其他属性：
    display: none
    position: absolute/fixed/sticky
清除float对其他元素所带来的影响：
    1、float元素底部插入一个带有 clear: both; 属性的元素
        1、底部放置一个HTML block水平元素 - <div style="clear: both;"></div>
        2、CSS after（IE8+）伪元素底部生成 - .clearfix:after{ clear: both; }
    2、父元素BFC化（IE8+）或 haslayout（IE6/7）
BFC/haslayout的通常声明
    1、float: left/right
    2、position: absolute/fixed
    3、overflow: hidden/scroll（IE7+）
    4、display: inline-block/table-cell（IE8+）
    5、width/height/zoom: 1/...（IE6/7）
综上，IE8以上浏览器使用：.clearfix:after{ content: ''; display: block; height: 0; overflow: hidden; clear: both; }
             .clearfix{ *zoom: 1; }
更好的方法：
    .clearfix:after{ content: ''; display: table; clear: both; }
    .clearfix{ *zoom: 1; }
切记，.clearfix 只需应用在浮动元素的父级元素上
浮动的特性：
    1、元素block块状化（砖头化）
    2、破坏性造成的紧密排列特性（去空格化）
智能化自适应布局：
    <div class="container"><a href="#" class="left"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="url"/></a><div class="right">很多其他内容</div></div>
    .container{ width: 600px; margin: auto; }
    .left{ float: left; margin-right: 20px; }
    .right{ display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

点击查看更多内容