CSS学习笔记五——CSS常见属性二

一、浮动与清浮动属性

浮动属性作用：
1、让网页的其它文本环绕某一元素显示；
2、让竖着放置的元素横向展示；

浮动属性 就是 float 属性，其取值有 left、right、none（默认）。
多个元素设置浮动时，会平行并列显示，见缝插针，先浮动的最靠边。

一个元素在设置了 float 属性后会漂浮起来，其下方的元素会顶上其所在的位置，此时，漂浮起来的元素可能会覆盖其下方元素的一部分（高度塌陷¹），且下方元素的文字会被挤到一边显示。

清浮动属性 指 clear 属性，其取值有 none（允许有浮动）、right（不允许右边有浮动）、left（不允许左边有浮动）、both（不允许有任意浮动）。
其作用在于清除前方元素的浮动干扰效果，使得该元素不会顶上浮动元素的原来位置，该属性只是改变元素的排列方式，浮动元素仍在漂浮且不占据文档位置。

二、溢出属性

溢出是指文本超出或容器内容过多，溢出情况出现时可用 overflow 属性对其进行处理。

overflow 属性取值：
（1）visible：显示溢出，溢出内容会出现在元素外，默认值；
（2）hidden：隐藏溢出内容，直接截断，文本裁切，可解决高度塌陷；
（3）scroll：无论文本有无溢出都会出现滚动条；
（4）auto：文本内容少就正常显示，内容多才出现滚动条（横纵向都出现），更长用；
（5）inherit：继承父元素的 overflow 效果；

overflow 属性可划分为 overflow-x 和 overflow-y 属性，分别设置横轴和纵轴的溢出效果。

三、空余空间属性

white-space 属性是在当容器中有空白部分时进行的样式改变。

取值有：
（1）normal：空白被浏览器忽略，默认值；
（2）nowrap：不被盒子宽高约束，直接一行显示，不换行，撑开浏览器横向滚动条，直到遇到换行标签 br 为止，最常用；
（3）pre：一段文本一行显示，保留所有文本内容中的空格、tab、回车；
（4）pre-wrap：一段文本正常进行换行，保留内容中的空格、tab、回车；
（5）pre-line：正常进行换行，保留内容中的回车，不保留空格；

四、文本溢出属性

text-overflow 属性处理文本超出时的效果。
取值有：
（1）clip：文本直接裁切，默认值；
（2）ellipsis：溢出文本显示省略标记；

五、文本溢出省略号效果

固定搭配：
（1）white-space 属性值为 nowrap，不换行，强制文本一行显示；
（2）overflow 属性值为 hidden，隐藏溢出内容，直接截断；
（3）text-overflow 属性值为 ellipsis，溢出文本显示省略号标记；
（4）容器宽度 width 必须设置；

六、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！

---

1. 高度塌陷问题：元素添加浮动属性后，其下方元素顶上该元素原来的位置，此时，漂浮起来的元素覆盖其顶上来的元素的一部分或全部，且漂浮起来的元素高度消失。（解决高度塌陷的方法） ↩︎