4月26日，命令行与CSS浮动，清除浮动

关于命令行：

可使用win自带win+r或git命令行提高工作效率，创建脚本。

关于浮动：

行内元素和块级元素的区别：

行内元素：

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列，块级元素之间自上向下排列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

我们可以通过display属性将块级元素和行内元素进行相互转换。

块级元素可以转换为行内元素：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

• 此时这个div不能设置宽度、高度；
• 此时这个div可以和别人并排了。

行内元素转换为块级元素：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度
• 此时这个span必须霸占一行了，别人无法和他并排
• 如果不设置宽度，将撑满父亲

关于清除浮动：

使一个元素脱离标准文档流的方法有：

• （1）浮动
• （2）绝对定位
• （3）固定定位        

关于浮动的解决方法有

1.使用clear : none | left | right | both

       none  :  默认值。允许两边都可以有浮动对象

       left   :  不允许左边有浮动对象

       right  :  不允许右边有浮动对象

       both  :  不允许有浮动对象

2.给父元素添加高度

3.外隔墙法和内隔墙法

4.给父元素添加overflow:hidden,原因：BFC

5.给父元素添加overflow:auto

6.父元素设置after,添加伪类。

 原理：利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html中插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

.outer { zoom:1; } //为了兼容性，因为ie6/7不能使用伪类，所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }

 其中clear:both;指清除所有浮动；content:' . '；display:block; 对于FF/Chrome/opera/IE8不能缺少，其中content()取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。 

利用伪元素，就可以不再HTML中加入标签。

:after 的意思是再.outer内部的最后加入为元素:after，

首先要显示伪元素，所以display:block，

然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；

其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0，

最后，要清除浮动，所以，clear:both。

tips:

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。