CSS笔记——浮动

一. 浮动

1. 块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以通过float来使元素浮动，从而脱离文档流
2. 可选值：
   (1) none: 元素默认在文档流中排列（默认值）
   (2) left: 元素会立即脱离文档流，向页面的左侧浮动
   (3) right: 元素会立即脱离文档流，向页面的右侧浮动
3. 当为一个元素设置浮动以后（float属性是一个非none的值），水平布局的等式便不需要强制成立，元素会立即脱离文档流，不再占用文档流的位置。元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或其他的浮动元素。
4. 浮动的特点：
   (1) 浮动元素会完全脱离文档流，不再在文档流中占据位置
   (2) 设置浮动以后元素会向父元素的左侧或右侧移动
   (3) 浮动元素默认不会从父元素中移出
   (4) 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
   (5) 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，不会超过此块元素
5. 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化：
   (1) 块元素：
   ① 块元素不再独占页面的一行
   ② 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
   (2) 内联元素
   ① 内联元素脱离文档流以后会变成块元素，特点和块元素一样
   (3) 脱离文档流以后，不需要再区分块元素和内联元素
   6.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以通过浮动来设置文字环绕图片的效果
   7.元素设置浮动以后分两层，上层是文字相关的，下层是盒模型相关的，浮动使元素层级提升半层

二. BFC （块级格式化环境）

1. 根据W3C的标准，在页面中的元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。开启BFC的元素会变成一个独立的布局区域
2. 当开启元素的BFC以后，元素将会具有如下特性：
   (1) 开启BFC的元素子元素和父元素的垂直外边距不会重叠
   (2) 开启BFC的元素不会被浮动元素所覆盖
   (3) 开启BFC的元素可以包含浮动的子元素
3. 开启元素的BFC
   (1) 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移
   (2) 设置元素绝对定位：副作用同浮动
   (3) 设置元素为inline-block：可以解决问题，但是会导致宽度丢失，
   (4) 将元素的overflow设置为一个非visible的值
   (5) 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
4. 但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6
   (1) 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout
   (2) 该属性的作用和BFC类似，所以IE6浏览器可以通过开hasLayout来解决该问题
   (3) 开启方式很多，直接将元素的zoom设置为1是副作用最小的开启方式

三. clear：清除掉浮动元素对当前元素产生的影响

1. 可选值：
   (1) none: 不清除浮动（默认值）
   (2) left：清除左侧浮动元素对当前元素的影响
   (3) right: 清除右侧浮动元素对当前元素的影响
   (4) both：清除两侧浮动元素对当前元素的影响（清除对他影响最大的那个元素的浮动）
2. 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其它元素的影响

四. 高度塌陷

1. 在文档流中，父元素的高度默认是被子元素撑开的
2. 但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
3. 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
4. clearfix既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

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