1. 元素的浮动float

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

基本语法格式如下：
选择器{ float:属性值; }
在上面的语法中，常用的 float 属性值有三个：left、right、none。
分别用于设置元素向左浮动、元素向右浮动和元素不浮动（默认值）。
案例代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>标签指定式选择器的应用</title>
  6.     <style type="text/css">
  7.         .father {
  8.             /*定义父元素的样式*/
  9.             background: #ccc;
  10.             border: 1px dashed #999; }
  11.         .box01,.box02,.box03 {
  12.             /*定义box01、box02、box03三个盒子的样式*/
  13.             height: 50px;
  14.             line-height: 50px;
  15.             background: #FF9;
  16.             border: 1px solid #F33;
  17.             margin: 15px;
  18.             padding: 0px 10px;
  19.             float: left;  /*定义box的左侧浮动样式*/    } 
  21.         p {
  22.             /*定义段落文本的样式*/
  23.             background: #FCF;
  24.             border: 1px dashed #F33;
  25.             margin: 15px;
  26.             padding: 0px 10px;  }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="father">
  31.         <div class="box01">box01</div>
  32.         <div class="box02">box02</div>
  33.         <div class="box03">box03</div>
  34.         <p>这里是浮动盒子外围的段落文本……。</p>
  35.     </div>
  36. </body>
  37. </html>

2. 清除浮动

由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。 在CSS中，通过clear属性清除浮动的方法是：给受到浮动的元素应用clear属性。 可以分别使用clear:left、clear:right、clear:both;来清除元素左、右及左右两侧浮动的影响。

（1）清除浮动对相邻元素的影响

案例代码：

p{ 
        clear:left;     /*清楚段落受左浮动的影响*/
}

（2）清除父元素受到子元素浮动的影响

运用clear属性只能清除元素左右两侧浮动的影响。 父元素受到子元素浮动的影响，如何清除，有3种方法。

a．使用空标记清除浮动

在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除浮动。 这个空标记可以为

、

、

等任何标记。

<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
<div class="box04"></div>        <!--在浮动元素后添加空标记-->
</div>

.box04{ clear:both;}                 /*对空标记应用clear:both;*/

b．使用overflow属性清除浮动

“overflow:hidden;”样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。

.father{                              /*没有给父元素定义高度*/ 
            overflow:hidden;               /*对父元素应用overflow:hidden;*/    
}

c．使用after伪对象清除浮动

使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

.father:after{                      /*对父元素应用after伪对象样式*/
          display:block;    /*必须有*/
          clear:both;      /*必须有*/
          content:"";     /*必须有*/
          visibility:hidden;
          height:0;
}

3. overflow属性

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

overflow属性的常用值有四个，分别表示不同的含义：

  • visible：内容不会被修剪，会呈现在元素框之外（默认值）。
  • hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。
  • auto：在需要时产生滚动条，即自适应所要显示的内容。
  • scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。

案例代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow属性</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 140px;
            background: #F99;
            overflow: visible;     /*溢出内容呈现在元素框之外*/}
    </style>
</head>
<body>
    <div>
        当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式。
    </div>
</body>
</html>