day04_CSS基础(4)

一、CSS布局种类

网页布局的核心——就是用 CSS 来摆放盒子位置。CSS布局有三种机制,分别为普通流、浮动、定位。

1)普通流
一个网页内的标签元素按照从上到下，从左到右的顺序排列。块级元素会独占一行，从上向下顺序排列。行内元素会按照顺序，从左到右顺序排列。
2)浮动
让盒子从普通流中浮起来——浮动最早是用来做文字环绕效果。
3)定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

二、浮动布局

2.1 浮动布局原理

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

2.2 浮动布局作用

1. 浮动最早是用来控制图片，实现文字环绕图片的效果。
2. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。

2.3 浮动布局语法

在 CSS 中，通过 float 属性定义浮动，语法如下：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

注意：

• 浮动只有左右，没有居中！
• 我们浮动的元素 只能一行显示（除非装不开盒子，才会下来）
• 浮动的元素 不占位置
• 浮动的元素是脱标 脱离标准流 不是标准流

2.4浮动布局的应用

1. 用普通流的大盒子（父级）定义上下顺序——占住位置；
2. 使用浮动在大盒子内部设置小盒子的位置——水平排列。

三、浮动布局的特性

3.1 与父盒子的关系

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

3.2 与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
• 浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流。

3.3 具有行内块元素特性

元素添加浮动后，会具有行内块元素的特性——元素的大小取决于：

• 定义的大小（优先级高）
• 元素内部的内容

四、浮动总结

浮动的目的——让多个盒子在同一行显示。

float —— 浮漏特

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：1. 浮动的盒子需要和标准流的父级搭配使用；2. 浮动可以使元素具有行内块特性。

五、清除浮动影响

1)为什么清除？

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

2)什么时候清除浮动？

当影响了我们布局的时候，就清除浮动。

5.1 方法一：额外标签法

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}   clear 清除  

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

5.2 方法二：overflow方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

5.3 方法三：after伪元素

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

5.4 方法四：before/after双伪元素

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}