1.元素的浮动

     浮动属性作为CSS的重要属性频繁地应用在网页制作中。在CSS中，通过float属性来定义浮动，其基本语法格式如下：

    选择器{float:属性值;}

2.清除浮动的影响

     为了避免左浮动或右浮动对元素的影响，往往需要在该元素中清除浮动。在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

在制作网页时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响。 clear属性只能清除元素左右两侧浮动的影响，子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。

下面总结三种常用的清除浮动的方法。

（1）在浮动元素之后添加空标记，并对该标记应用“clear:both”样式。

（2）父元素运用overflow:hidden属性清除浮动影响。

     （3）使用after伪元素清除浮动。

.father::after{

  display: block; /*将默认的行内伪元素转换为块级元素，确保能独占一行触发清除浮动规则。*/

 clear: both; /*核心属性，指定该伪元素清除左右两侧的浮动元素，迫使父元素包裹住浮动内容*/

 content:''; /*这是伪元素必需的属性，用于在元素末尾插入一个空的生成内容。即使不添加可见内容，也需保留该属性激活伪元素*/

 visibility: hidden;  /*隐藏生成的伪元素，防止其在页面上显示空白区域*/

 height: 0; /*让空内容不占据实际高度，避免干扰页面布局。*/

}

3. 溢出属性

      当盒子内的元素超出盒子自身的大小时，内容就会溢出，这时如果想要规范溢出内容的显示方式，就需要使用CSS中的overflow属性，其基本语法格式如下：

选择器{overflow:属性值;}

overflow属性的常用值有四个，分别表示不同的含义，具体如下表所示。