Css ：float浮动影响及解决问题的方案
CSS有三大特性，分别是继承性，层叠性，优先级
继承性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与"font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
内联元素可以继承的属性:
字体系列属性
除text-indent、text-align之外的文本系列属性
块级元素可以继承的属性：text-indent、text-align
行内元素不能设置“width”和“height”，块元素和行内块元素可以设置“width”和“height”；
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式。
样式不冲突，不会层叠。
优先级
选择器优先级【级联】
1. !important
优先级最高，不推荐
2. 特性值
1000 内联style属性
100 id
10 类名选择器、伪类选择器、属性选择器
1 标签选择器、伪元素选择器
3. 代码顺序
如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高
css中哪些属性可以继承-css教程-PHP中文网
浮动造成的影响
总结:
1.会脱离文档流，但是又不会完全脱离;
2.浮动过后块级元素会变成行内元素，让其他元素占据他后面的空间，
3.浮动后宽度变成了内容实际的宽度;
4.浮动后父级如果没有高度会塌陷;
5.如果想要内容都水平排列，需要所有的盒子都设置浮动
6. 如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示
浮动不占位的副作用只会同级之间产生，浮动的副作用都是往下影响，不会影响上边的盒子
(28条消息) 浮动带来的哪些影响---总结篇_努力向上长的小小草啊的博客-CSDN博客_浮动的影响
浮动造成的盒子内容影响
1.盒子会影响后面的盒子，使后面盒子上移动，且文字会在原来位置挤出去了。盒子文字问题
https://juejin.cn/post/7045923461268504584
浮动盒子会影响其他盒子内文字
为什么要清除浮动
大白话：由于父级盒子在很多情况下，不方便给出确定高度(eg. 图一)，但是子盒子开启浮动后，脱离了文档流，不再占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。
https://blog.csdn.net/u010358168/article/details/106390012
父级没有高度子盒子开启浮动影响后续布局排版
父元素可以设置高度。
额外标签发(隔墙法)通俗易懂，书写方便添加许多无意义标签，结构化差
父级overflow:hidden书写方便溢出隐藏等 BFC
父级after伪元素结构语义化正确IE6-7不支持after，兼容问题
父级双伪元素结构语义化正确IE6-7不支持after，兼容问题
BFC介绍
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
.float为left/right是子元素本身触发了BFC，使普通布局流变成了浮动流布局；父级元素因为浮动从而高度塌陷，所以需要overflow来触发父级元素的BFC来重新布局回到普通布局。
2.理解BFC不能只是从字面上的原理去，还需要结合CSS属性本身，比如position:absolute/fixed 这些优先级高于BFC规则。
原文链接：https://blog.csdn.net/sinat_36422236/article/details/88763187
记住清除浮动，不然会挤下去ul，
扩展些html内容
嵌套规则:
1.块级元素可以嵌套块级元素和行内元素; div > div
2.行内元素原则上只能嵌套行内元素;
span>a/a》span
3.p和h1~h6只能嵌套行内元素
p》span
4. ul和ol只能嵌套li, li可以嵌套任意
参考链接：
css中哪些属性可以继承-css教程-PHP中文网
(28条消息) 浮动带来的哪些影响---总结篇_努力向上长的小小草啊的博客-CSDN博客_浮动的影响
https://juejin.cn/post/7045923461268504584
https://blog.csdn.net/u010358168/article/details/106390012
https://blog.csdn.net/sinat_36422236/article/details/88763187