BFC特性,开启BFC的方法,怪异盒子模型

BFC特性

BFC元素特性就是把元素变为一个没有任何问题行内块，可以设置宽高，如果没有设置宽高，宽度由内容撑开

2.开启BFC的方法

设置 overflow 属性：将 overflow 属性设置为 hidden、auto 或 scroll

设置 display 属性：将 display 属性设置为 inline-block、table-cell、table-caption、flex 或 grid

设置 position 属性：将 position 属性设置为 absolute 或 fixed

设置 float 属性：将 float 属性设置为 left 或 right

3.怪异盒子模型

• 将盒子模型添加“box-sizing:border-box”属性，盒子的width、height数字就表示盒子实际占有的宽度(不含margin)

• 即padding、border变为“内缩”的，不再“外扩”

在怪异盒子模型中，元素的宽度和高度包括内容、内边距（padding）和边框（border）。这意味着，如果你设置一个元素的宽度为200px，那么这个元素的宽度将包括200px的内容、内边距和边框。

在这个例子中，.box 元素的宽度将是200px + 20px（左内边距）+ 20px（右内边距）+ 10px（左边框）+ 10px（右边框）= 250px。

在标准盒子模型中，元素的总宽度和总高度的计算公式如下：

• 总宽度 = 内容区域宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
• 总高度 = 内容区域高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

4 display导致text-overflow:ellipsis 不显示省略号问题，以及不换行的问题

问题效果

原因display导致子元素开启了BFC特性，子元素变为一个没有任何问题行内块，如果没有设置宽高，宽度由内容撑开，所以超出部分会看不见，也不会有省略号，以及不换行。

解决办法，给文字部分包一个<span>，<span>标签开启BFC，文字元素为孙子元素

展示隐藏的文字给个title属性，鼠标放上去，就可