前端浮动模块-CFANZ编程社区

一.浮动的分类：

左浮动
右浮动
清除浮动

二.浮动的理解：

1.我们可以把浮动看做一个气泡，浮动就是漂浮的意思。网页顶端看做水面，模块浮动到网页顶端第一行。
2.非浮动的模块会默认显示在第一行，而且页面的每一行只能显示一个非浮动的模块。

三.浮动案例：

我们想要得到如图的操作：

前端浮动模块_代码实现

从图中我们发现有三个块是在一行的，前面我们已经提到，非浮动的块是独占一行的，现在要想让块都能在一行，那就必须让3个块都处于浮动状态，那么能不能让第一个块不浮动，其余浮动呢？

当然也不行，原因是，我们把块看成一个气泡了，它漂浮起来会遮盖住第一个块。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <style type="text/css">#black1{
        background-color:blue;
        }
        #balck2{
        backgroud-color:yellow;
        }
        #black3{
        background-color:gray;
        }
        div{
        width:100px;
        height:100px;
        float:left;
        border:solid 1px black;
        }</style>
    </head>
  <body>
    <div id="black1">块1</div>
    <div id="black2">块2</div>
    <div id="black3">块3</div>
  </body>
</html>

通过以上代码实现，代码实现思路：
1.用3个div包住三个块，形成蓝色块，黄色块，灰色块。
2.采用id选择器，对三个块的id进行赋值：black1，black2，black3.
3.设置style样式，进行CSS样式设置，修改块的样式
样式修改代码：

<style type="text/css">#black1{
        background-color:blue;
        }
        #balck2{
        backgroud-color:yellow;
        }
        #black3{
        background-color:gray;
        }
        div{
        width:100px;
        height:100px;
        float:left;
        border:solid 1px black;
        }</style>

在其中我们通过标签选择器对所有块进行了宽高的定义，还定义了我们重点要说的浮动。

<style type="text/css">div{
        width:100px;
        height:100px;
        float:left;
        border:solid 1px black;
        }</style>

我们定义左浮动的方法：
float:left;
我们定义右浮动的方法：
float:right;

四.浮动的特殊情况

前端浮动模块_html_02

1.我们发现，如果要完成上图的效果的话，应该是这种情况：

块1和块2都要左浮动，那么块3的情况呢？

答：块3的情况一定不是非浮动那么简单就完了，因为，块3非浮动的话会导致块3跑到第一行被块1遮挡住。

所以对于块3我们进行单独特殊处理，上代码：

<style type="text/css">#black1{
        background-color:blue;
        float:left;
        }
        #balck2{
        backgroud-color:yellow;
        float:left;
        }
        #black3{
        background-color:gray;
        clear:left;
        }</style>