实现CSS布局的三种机制和常见页面的三种布局

1.实现CSS布局的三种机制

CSS提供三种机制来设置盒子的摆放位置，分别是普通流、浮动、定位，其中，

1.普通流（标准流）

• 页面内的元素标签按照从上到下，从左到右的排列顺序
  • 块级元素会独占一行，从上到下的顺序排列
  • 行内元素会同在一行，从左到右的顺序排列

2.浮动

概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

• 脱离标准流，到指定位置

• 漂浮在普通流的上面

• 添加浮动属性，元素不占位置

• 只有左右浮动，没有居中

  float:none left right;
  

  关于浮动扩展

  • 与父盒子的关系
    • 子盒子的浮动是参照父盒子对齐
    • 不会与父盒子的边框重叠，也不会超过父盒子的边距
  • 与兄弟盒子的关系
    • 在一个父级盒子中，如果前一个兄弟盒子是：
      • 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
      • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
      • 浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流。

*注：当元素添加浮动后，会具有行内块级元素的特性–元素的大小取决于：内容的大小和元素内部的内容

关于处理浮动后带来的后果

• 额外标签法
• 给父级元素添加overflow属性方法
• 使用after伪元素清楚浮动
• 使用before和after双伪元素清除浮动
• ​

3.定位

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

2.常见页面的三种布局

1.页面常见的三种布局方式

​ 版心布局
版心：宽度超过页面的一半，并且在页面中水平居中
通栏布局
通栏：高度不到页面的一半，宽度和也面一样宽
分栏布局 左右分类

3.清除浮动

清除浮动并不是清除浮动，而是清除浮动后带来得影响

清除浮动的方式：

1.给父元素添加overflow：hidden；

2.额外标签法

3.伪元素清除

伪元素：在html 结构中没有，在浏览器加载完页面后，在浏览器中的显示结构中有

::before / ::after ==> 必须要添加给父元素而且要设置content：“ ”

.clearfix::after{
    content:"";          //必须要有content 才能显示
    display:block;      //清除浮动必须是块级元素
    clear:both;         //清除浮动
    visibility:hidden;	//隐藏content中的内容
    height:0;     		//为了去除content的内容高度 
    line-height:0;
}
.clearfix{
*zoom:1;      //为了解决IE6-7的兼容问题
}

3.双伪元素清除浮动

.clearfix::before,.clearfix::after{
    content:"";
    display:table; 
}
.clearfix{
	*zoom:1;      //为了解决IE6-7的兼容问题
}