前端入门系列--CSS（4）

1、CSS布局的三种机制

1、普通流：

• 块级元素会独占一行，从上向下顺序排列；
  • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
  • 常用元素：span、a、i、em等

2、浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示；

3、定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效；

2、浮动布局

问题引入：块元素不能在一行上显示，而行内块元素在一行上显示又会有中间小缝隙的缺点，所以这里引入浮动布局可以解决该问题；

2.1浮动布局作用与属性

1. 让多个盒子(div)水平排列成一行（重要）；
2. 可以实现盒子的左右对齐等等；
3. 浮动最早是用来控制图片，实现文字环绕图片的效果；

选择器 { float: 属性值; }

1、属性值有none、left、right三种选择；
2、设置了浮动属性的块元素会漂浮在标准流上面，不占位置；
3、任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似；

2.2浮动布局案例

如一些常见的电商页面都是都过ul>li的浮动布局来实现的

2.3浮动布局扩展

2.2.1浮动布局与父盒子的关系

• 子盒子的浮动参照父盒子对齐
• 不会与父盒子的边框重叠，也不会超过父盒子的内边距

2.2.2浮动布局与兄弟盒子的关系

兄弟盒子也浮动则会在一行上按先后顺序排列；
若上一个兄弟盒子不浮动，则会在兄弟盒子的下一行显示。如果下一个兄弟盒子不浮动其会浮起来在兄弟盒子上面；（所以在父盒子中，如果其中的一个子元素浮动了其他元素最好也设置为浮动，否则容易出错）

2.4清除浮动造成的影响

**清除浮动的目的是：**父盒子在很多情况下不方便给高度（要让其子元素自然撑开），但是其中子元素如果全都浮动则最终父盒子高度会为0；

选择器{clear:属性值;}//实际中属性值一般填both

具体做法：
1、在浮动元素末尾添加一个<div style=”clear:both”></div>；
2、给父级元素添加overflow:hidden属性；
3、使用after伪元素去除浮动

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

4、使用双伪元素去除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

上面的记cdcvh，cdc
34两点若使用直接将代码复制放到style标签中，并在父类中引用上clearfix类即可

3、CSS最终补充

一般在实际项目的CSS中会写上以上代码进行一些初始化的设置，如下图：

上面有时还会补充：

a{
  text-decoration:none;//去掉a的默认样式
]

此外如一些电商项目中还会写一个版心为以后几乎所有元素都需调用：