浮动和文本溢出
一、浮动
- 浮动属性
Float:none/left/right;
一个元素设置float:left/right;时会脱离文档流(半脱离),不占空间
清除浮动 clear:none/left/right/both;
none:默认值。允许两边都可以有浮动对象
left:清除左浮动/不允许左边有浮动对象
right : 清除右浮动/不允许右边有浮动对象
both : 清除两端浮动/不允许有浮动对象
PS:clear只能影响使用清除元素的本身,不能影响其他元素
eg:
<div class="box1">
<div class="box2"></div>
</div>
.box2{
float:left;
width:100px;
height:100px;
}//此时.box1不会被撑开,他的内容 .box2已经脱离文档流
二、容器溢出的相关属性
1.容器溢出相关属性:
Overflow: visible/hidden/scroll/auto/inherit;
Visible:默认值,溢出内容会显示在元素之外
Hidden: 溢出内容隐藏
Scroll:滚动,溢出内容以滚动的方式显示
Auto:如果有溢出会加滚动条,没有溢出正常显示
Inherit:规定遵从父元素继承overflow属性的值
Overflow-x:X轴溢出
Overflow-y:Y轴溢出
2.空余空间
white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit
该属性用来设置如何处理元素内的空白
normal:默认值,空白区域会被浏览器忽略
nowrap:文本不会换行,会在同一行上继续,知道遇到<br>标签为止
pre:空白区域会被浏览器保留,类似于html中的pre;
pre-wrap:保留空白符序列,但是正常的进行换行;
pre-line:合并空白符序列,但是保留换行符;
inherit:规定应该遵从父元素继承White-space属性的值;
3.省略号显示(定义当单行文本溢出时是否显示省略号)
text-overflow:clip/ellipsis
clip:不显示省略号;
ellipsis:显示省略号;
要实现溢出时产生省略号的效果,还需要设置:
1.容器宽度,width:value;
2.强制在一行内显示: white-space:nowrap;
3.溢出内容为隐藏: overflow:hidden;
4.溢出文本时显示省略号:text-overflow:ellipsis;