HTML+CSS要点5：清除浮动与BFC

1 元素层级示意图

2 渲染规则

BFC（Block Formatting Context ）：块级格式化上下文

元素里面的内容不会干扰元素外面的内容，所有元素都会按照文档流的排列方式排列

BFC的作用：

• 包含浮动元素，解决父级高度塌陷问题
• 阻止margin的传递
• 不被浮动元素覆盖

BFC的触发条件：

• float值不为none;
• overflow值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute 、 fixed

3 文档流

• 页面上的元素按照：从上到下从左到右排列
• 一个元素在页面中的位置，取决于他在代码中的位置
• 从大到小，从左到右，从外到里
• 先排成一行，一行不够再换行

浮动会破坏文档流

• 根据指定的方向发生位移，碰到父级的边界或者相邻元素后停止

脱离文档流问题

4 清浮动

（1）如果可以使用固定高度，可以直接给父级添加固定高度

（2）利用
达到清除浮动的效果

换行标签，会在当前位置另起一行，如果希望在当然已有内容的下一行进行 输出，可以添加一个属性 clear（可选值：left、right、all）

（3）使用clear属性清除浮动
clear的写法

1. clear: left;
2. clear: right;
3. clear: both;
4. clear: none;

clear的特性

• 只会对写在它前面的浮动元素起效，后面的清除不了
• 清除指定方向的浮动
• 只有添加给块标签才是有效的，并且是具有独占一行效果的块（加了浮动的不行哟）

（4）利用伪元素清除浮动

div::after{
	content: '';
	display: block;
	clear: both;
}

• after给当前父级添加一个，处于最后位置的子元素（clear只对前面的元素有效）
• content 添加内容
• display:block 只有添加给块标签有效
• clear:both 同时清除左右方向的浮动
  注：上述任何一项都不可以丢！！

（5）父级触发BFC

5 横向布局

(1)转化为inline-block

• 注：元素换行会产生空格，给父级加font-size:0;进行处理
• 注：转化为inline-block之后记得给元素加上vertical-align:top;（默认基线对齐 方式改为顶部对齐，处理底部出现空隙的问题）
  (2)浮动
• 注：记得清除浮动

6 溢出

overflow - 溢出

• overflow: visible; 默认
• overflow: hidden; 隐藏
• overflow: auto; 超出才显示滚动条
• overflow: scroll; 强制出现滚动条

text-overflow - 文字溢出

• text-overflow: clip; 裁切
• text-overflow: ellipsis; 省略号

使用的时候 注意结合 overflow：hidden 和 white-space：nowrap

7 伪元素（before和after）

• 伪元素：利用css给一个标签创建出来的子级元素，该元素在页面中真实存在，但是在html中并不存在。
• 伪元素定义参考链接：
  https://www.w3school.com.cn/css/css_pseudo_elements.asp

（1）before：
往指定的标签的内部的 前端 添加内容
（2）after：
往指定的标签的内部的 后端 添加内容
注意：before和after都需要利用content添加内容，所有的样式针对该内容进行设置

8 content可以添加的内容：

（1）文字

（2）调用当前元素的属性

（3）url() 引用媒体文件

（4）添加图标（http://fontawesome.dashgame.com/）
-借助一些现有的图标库，通过content添加