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. 如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示

1. 浮动不占位的副作用只会同级之间产生，浮动的副作用都是往下影响，不会影响上边的盒子

2. (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