【Day06】文本溢出

学习内容

• 溢出属性
• 浮动影响

溢出属性

1.溢出属性: overflow
属性值: visible 可见的 (默认)
        scroll 显示滚动条
        auto 超出时显示滚动条
        hidden 超出内容隐藏
        inherit 继承父元素的值
        单独设置水平或垂直方向上的溢出时，overflow-x overflow-y

2.内容强制一行显示 :white-space
属性值: nowrap 不换行 normal 正常换行 (默认)
pre: 保留所有文档格式
pre-line: 保留换行，合并空白
pre-wrap: 保留空白，文档正常进行换行

扩展点: 当内容全是数字或字母时，默认在一行显示，用 word-wrap: break-word; 来实现换行

3.文本超出: text-overflow
属性值: ellipsis 显示省略号 clip 正常显示 (默认,不显示省略号)

实现单行文本超出显示省略号
1.设置固定宽度
2.white-space: nowrap; 让文本强制在一行显示 (不换行)
3.text-overflow: ellipsis; 显示省略号
4.overflow: hidden 超出内容隐藏

多行文本显示省略号
-webkit-line-clamp: 3; 文本显示行数
display: -webkit-box; 定义可伸缩的盒子
-webkit-box-orient: vertical; 检索伸缩盒对象子元素的排列方式
overflow: hidden

浮动影响

浮动副作用: 浮动元素会半脱离文档流，从而造成父元素高度塌陷

解决办法:
1.给父元素设置固定高度 优点: 简单易懂 缺点: 不灵活，难以维护
2.给父级元素也设置浮动 优点: 代码量少 缺点: 将错就错的办法，会严重影响后续元素的布局 (治本不治标)
3.清除浮动造成的影响 属性名: clear 属性值: left 清除左浮动 right 清除右浮动 both 左右都清除 none (默认)
  在最后一个浮动元素的后面添加一个空标签，给这个标签设置 clear: both;
  优点: 完全符合语义 缺点: 添加了一个无用标签，增加html代码量
  谁被影响了，就给谁设置 clear: both; (偏门，治标不治本)

4.::after 利用伪元素选择器，给父元素添加::after{
    content: ""; (标签的内容为空)
    display: block; (生成一个类似div的标签)
    clear: both; (清除浮动)
}
  主流清除浮动副作用办法 缺点: 难以理解

5.给父元素设置 overflow: hidden; 触发BFC特性 (块级格式化上下文)，让元素成为一个完全独立的盒子，不受其他任何元素布局影响，也不影响其他元素的布局