溢出、清除浮动

目录

溢出

overflow（容器溢出属性）

white-space（空余空间属性）

text-overflow（单行文本省略号属性）;

文本溢出变省略号设置

清除浮动属性 clear

---

溢出

overflow-x;   overflow-y;  设置滚动条的属性

overflow（容器溢出属性）

visible:默认值，不隐藏，会呈现在元素框之外；
hidden：内容会被修剪，溢出隐藏,并且多余内容是不可见的；
scroll：内容会被修剪，溢出隐藏,但是元素会显示滚动条;
auto：如果内容被修剪，溢出隐藏,溢出时隐藏并且显示滚动条,不溢出不显示滚动条;
inherit：从父元素继承overflow属性的值。(inherit:继承)

white-space（空余空间属性）

white-space(空白)

normal：默认值，多余空白会被浏览器忽略只保留一个；
pre：空白（空格、Tab）会被浏览器保留且文本不换行，手动添加回车时会换行。
pre-wrap：保留空白符（空格、回车、Tab）序列，但是正常的进行换行；
pre-line:合并空白符（空格、Tab）序列，但是保留换行符（回车）；
nowrap:强制一行内显示,文本不会换行，直到遇到<br/>标签为止，合并空白符（空格、Tab、回车）序列;

text-overflow（单行文本省略号属性）;

单独使用无效（必须是单行文本）

clip：不显示省略号（...），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记；

文本溢出变省略号设置

省略号设置：
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1、元素要有宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;  强制一行显示;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号:text-overflow：ellipsis;
                       
注：必须是单行文本才能设置文本溢出。

清除浮动属性 clear

{clear：both}

1. clear属性拥有清除浮动的功能。属性值：none、left、right、both

2. none：默认值，不清除浮动

3. left：清除左浮动（只能清除左浮动）

4. right：清除右浮动（只能清除右浮动）

5. both：清除两侧浮动，不允许有浮动。（即可清除左浮动，又可清除右浮动）。

清除浮动之后，还是原来的浮动的方向 按标准流排列