常见布局遇到的小问题

一：浮动

1： float
属性值有：left 和 right 。

浮动后会使得父元素脱离了默认文档流，导致高度塌陷。
即未浮动前是大框(未设高度)里包裹元素1与元素2，浮动后大框不再包裹住元素1和元素2了，而且大框没有了高度

二：浮动塌陷解决办法

（1）伪元素清除浮动
给父元素添加clearfix类名

.clearfix {
zoom: 1,/* 兼容ie */ 

}
  .clearFix {
            content: '';
            display: inline-block;
            zoom: 1;
            clear: both;
        }

（2）overflow+zoom方法

.fix{
     overflow:hidden;
     zoom:1;     /*兼容IE6*/
}

此方法优点在于代码简洁，涵盖所有浏览器。
缺点：overflow:hidden是个小炸弹，里面的元素要是想来个margin负值或是负的绝对定位，会导致元素直接被裁掉。
（3）空标签方法：

<div style="clear:both;"></div>

当作最后一个标签放到父标签后。

优点：兼容性好、使用方便。
缺点：造成一个巨大的浪费，浪费了一个空标签，而且复用性差，只能使用一次，有违结构与表现分离。

注意：
IE6下浮动元素造成双边距的成因与解决方法
成因：设置浮动块元素的左右外边距和左右内边距会加倍

解决方法：

1.给浮动块元素加display-inline属性。

2.在浮动元素外面嵌套一个div，由这个div进行浮动，里面内容设置外边距和内边距

三：伪元素（:before & :after）

(1):引自菜鸟教程—https://www.runoob.com/css/css-pseudo-elements.html
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

四：羽化

给盒子元素添加阴影；
box-shadow: 10px 10px 5px 0 #888888;
x轴方向，y轴方向，羽化模糊距离，阴影大小，羽化背景颜色。

五：动画

–https://www.runoob.com/cssref/css-animatable.html