CSS优先级算法如何计算？

样式优先级规则：优先级顺序为：!important>style>权重值
权重规则：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

清除浮动常用方法

方式一:使用overflow属性来清除浮动

.parent{
　　overflow:hidden;
}

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

方式二:使用额外标签法

.clear{
　　clear:both;
}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

方法三:使用伪元素来清除浮动(after意思:后来,以后)

.clearfix{
   content:"";//设置内容为空
   height:0;//高度为0
   line-height:0;//行高为0
   display:block;//将文本转为块级元素
   visibility:hidden;//将元素隐藏
   clear:both//清除浮动
}

总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,

所以我们尽量使用第三种方法来清除浮动

来谈谈BFC

[参考链接]
https://segmentfault.com/a/1190000012988829

BFC基本慨念

BFC是英文缩写,翻译为"块级格式化上下文"。
说白了BFC就是一种css盒模型的渲染规则。既然说了是渲染规则,那你自然需要去记住这些规则了,没法解释为什么。

BFC渲染规则

BFC其实有很多渲染规则,我们这里说4条比较重要的规则,知道这些规则,你就可以回答上面的4个现象了。

规则1: 创建了BFC的元素中,在垂直方向上的margin会发生重叠。根元素<html>就是一个BFC元素 (这个可以解释margin重叠)
规则2: BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。
规则3: BFC元素不会和浮动的元素重叠。(这个可以解释两栏自适应)
规则4: 计算BFC元素的高度时,里面浮动元素的高度也会参与计算 (用来解释overflow:hidden可以清除浮动)

普通元素如何创建BFC

首先我们根元素html,就是最大的BFC容器。
创建BFC的方式很多,常见包括:

float不为none的都可以
overflow: hidden / auto
position: 不为static 、 relative都可以
display: table-cell ... 表格相关的

不过我觉得用到最多的还是

overflow : hidden

CSS常见问题