浮动

1.float

浮动样式主要用于对块元素的布局

元素一旦浮动起来，就会脱离标准文档流

float属性设置浮动，属性值包括left(左浮动)，right(右浮动)，none(不浮动)

2.clear

用于清除浮动。属性值包括：left(清除左浮动)，right(清除右浮动)，both(清除全部浮动)

3.解决父级边框塌陷

方式一：

在标准文档流中，父级如果不指定高度，高度由子级撑开。

如果子级浮动，父级的边框就会塌陷，第一种解决的方法是：给父级一个明确的高度。

方式二：

在父级的最下面，添加一个不浮动的元素，并清除前面的浮动空间。

方式三：

通过伪元素样式在父级的下面添加块级元素，再利用该块级元素清除前面的浮动，原理根方法2一样。

::after表示在指定的父级的下面，添加元素

::before表示在指定的父级的上面，添加元素

.parent::after{/* content属性里面设置添加的元素里面的内容 */content:'';/* 下面是设置该元素的样式 */display:block;clear:both;}

方式四：

给父级添加一个overflow属性，属性值是非visible。

4.overflow

overflow属性，用于设置溢出处理

属性值包括：visible(溢出部分显示，是默认值)

hidden(溢出部分隐藏)

scroll(溢出部分，通过滚动条查看)，如果内容不溢出，还是会出现滚动条的区域

auto(自动，如果内容溢出，出现滚动条；没有溢出，不会出现滚动条区域)

5.overflow配合锚链接

overflow配合锚链接的使用，可以增长一个盒子的实际使用空间

id属性值可以作为锚链接的锚标记使用

6.文本溢出处理

white-space 属性设置空白处理，属性值nowrap，表示设置文本不换行，属性值pre，表示保留空格

overflow 属性是溢出处理，属性值hidden表示溢出部分隐藏

text-overflow 属性设置文本溢出处理，属性值ellipsis表示文本溢出部分显示...

注意：上面的三个属性值缺一不可

overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

7 多行文本溢出处理

display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical;//子元素应该被水平或垂直排列-webkit-line-clamp:3;//3行后显示省略号