浮动和文本溢出

一、浮动

1. 浮动属性

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；