#CSS文本溢出和清除浮动

1. 文本溢出

第一步:强制内容在一行显示。

第二步：将超出的内容隐藏掉。

第三步：将超出的文字用省略号代替。

2.浮动

2.1什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下

属性值	描述值
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

2.2浮动的特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

2.3浮动元素的排列位置

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

2.4浮动的目的

1、浮动的目的就是为了让多个块级元素同一行上显示。

2、一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

3、元素添加浮动后，浮动的元素脱标,虽然一行内显示但是display属性为block。

3.清除浮动

3.1清除浮动的目的

浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

换句话说，不是清除浮动，而是清除浮动后造成的影响。

3.2清除浮动的方法

在CSS中，clear属性用于清除浮动，其基本语法格式如下:

选择器{

clear:属性值;

}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

使用after伪元素清除浮动(最好用的方法)

:after 方式为空元素的升级版，好处是不用单独加标签了