2020-02-03（clear 和BFC清浮动）

清除浮动的方案

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

2.利用< br/>达到清除浮动的效果

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

<br clear="all"/>

(1)left
(2)right
(3)all

3.clear清除浮动

clear的写法

clear: left;
clear: right;
clear: both;
clear: none;

clear的特性

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

4.伪元素清浮动

伪元素：利用css给一个标签创建出来的子级元素，该元素在页面中真实存在，但是在html中并不存在。
before和after

利用content可以添加内容，所有的样式针对该内容进行设置

● before：往指定的标签的内部的 前端 添加内容
● after：往指定的标签的内部的 后端 添加内容，字符。

#box::before{
content: '前面元素显示的内容';
color: red;
}
#box::after{
content:'后面元素显示的内容';
color: green;
}
#box{
color: yellow;		
}
<div id="box">盒子本身的内容</div>

在css 里面content 的妙用

• 调用当前元素的属性

content: attr(href);
-----------------------------------
<a href="https://www.baidu.com/"></a>

• url() 引用媒体文件

div::before{content: url(mouse.jpg);}
----------------------------------
<div>这是一个mouse</div>

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

div::after{
content: "\f2ba";
font: 14px/1 FontAwesome;
display: inline-block;
-----------------------------------
<div></div>
}

这样的图标，我们称为字体图标，可以像字体一样操作
font-size设置大小
color设置颜色

利用伪元素清除浮动

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

Δ after给当前父级添加一个，处于最后位置的子元素（clear只对前面的元素有效）

Δ content 添加内容

Δ display:block 只有添加给块标签有效

Δ clear:both 同时清除左右方向的浮动

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

一个独立渲染区域的名称（布局环境的名字），只有Block-level box参与，它规定了内部的Block-level box 如何布局，并且不影响BFC区域以外的内容，当然BFC以外的也影响不了里面的。

BFC的作用：

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

BFC的触发条件：

• float的值不为none；
• overfloat值不为visible
• display的值为inline-block，table-cell，table-caption ，block
• position的值为absolute ，fixed

overflow - 溢出

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

text-overflow - 文字溢出

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

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