1、标准流（普通流/文档流）

标准流就是标签按照规定好的默认方式排列

（1）块级元素会独占一行，按照从上到下的方式排列

（2）行内元素会按照顺序，从左到右的顺序进行排列，遇到父元素则自动换行

（3）纵向排列标准流，横向排列用浮动

 

2、浮动的简单应用

（1）让多个块级元素水平排列在一行（这里将行内元素转换为了块级元素）

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
             .myclass1{
                background-color: red;
                width: 100px;
                height: 200px;
                display:inline-block;
            }
            
            .myclass2{
                background-color:black;
                 width: 100px;
                height: 200px;
                display:inline-block;
            }
             .myclass3{
                background-color: red;
                 width: 100px;
                height: 200px;
                display:inline-block;
               }      
        style>
    head>
    <body>
        <span class="myclass1">1span>
        <span class="myclass2">2span>
        <span class="myclass3">3span>
    body>html>

CSS：浮动（左浮动、右浮动）_CSS

 

 

 可以看出，块元素在显示的时候，他们之间会有空隙。

（2）添加浮动

        <style type="text/css">
             .myclass1{
                background-color: red;
                width: 100px;
                height: 200px;
                display:inline-block;
                float: left;
            }
            
            .myclass2{
                background-color:black;
                 width: 100px;
                height: 200px;
                display:inline-block;
                 float: left;
            }
             .myclass3{
                background-color: red;
                 width: 100px;
                height: 200px;
                display:inline-block;
                 float: left;
               }      
        style>

CSS：浮动（左浮动、右浮动）_浮动_02

 

 

 在标准流中不能实现的布局效果，在浮动中就可以很容易地完成，浮动可以改变标签的默认的排列方式。

 

3、浮动（左浮动与右浮动）

（1）左浮动

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
             .myclass1{
                background-color: red;
                width: 100px;
                height: 200px;
                display:inline-block;
                float: left;
            }
            
            .myclass2{
                background-color:black;
                 width: 100px;
                height: 200px;
                display:inline-block;
                 float: left;
            }          
      
        style>
    head>
    <body>
    <div class="myclass1">div>
    <div class="myclass2">div>
    body>html>

CSS：浮动（左浮动、右浮动）_浮动_03

 

 

 两个块元素本来是要每个div独占一行的，但是在添加了浮动以后就会合并到一行显示，因为设置的是左浮动，他们两个都是靠左排列的。

（2）一个左，一个右

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
             .myclass1{
                background-color: red;
                width: 100px;
                height: 200px;
                display:inline-block;
                float: left;
            }
            
            .myclass2{
                background-color:black;
                 width: 100px;
                height: 200px;
                display:inline-block;
                 float: right;
            }          
      
        style>
    head>
    <body>
    <div class="myclass1">div>
    <div class="myclass2">div>
    body>html><!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
             .myclass1{
                background-color: red;
                width: 100px;
                height: 200px;
                display:inline-block;
                float: left;
            }
            
            .myclass2{
                background-color:black;
                 width: 100px;
                height: 200px;
                display:inline-block;
                 float: right;
            }          
      
        style>
    head>
    <body>
    <div class="myclass1">div>
    <div class="myclass2">div>
    body>html>

CSS：浮动（左浮动、右浮动）_CSS_04

 

 

 

4、浮动的特性

（1）浮动元素会脱离标准流（不再保留原来的位置，也就是说其它元素可以占用浮动元素的位置）

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
             .myclass1{
                background-color: red;
                width: 100px;
                height: 200px;
              
                float: left;
            }
            
            .myclass2{
                background-color:black;
                width: 200px;
                height: 300px;
             
            }          
      
        style>
    head>
    <body>
    <div class="myclass1">div>
    <div class="myclass2">div>
    body>html>

CSS：浮动（左浮动、右浮动）_CSS_05

 

 

在对红色元素添加了浮动以后，他的位置是可以被其他的元素所占用的。

（2）浮动元素会在一行内显示并且元素顶部对齐

<!DOCTYPE html><html>

    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
            .myclass1 {
                background-color: red;
                width: 100px;
                height: 200px;
                float: left;
            }
            
            .myclass2 {
                float: left;
                background-color: black;
                width: 200px;
                height: 200px;
            }        style>
    head>

    <body>
        <div class="myclass1">div>
        <div class="myclass2">div>
    body>html>

CSS：浮动（左浮动、右浮动）_浮动_06

如果是标准流的话，他们是上下显示的，即一个div元素独占一行

（3）会具有行内块元素的特征

<!DOCTYPE html><html>

    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
            .myclass1 {
                background-color: red;
                width: 100px;
                height: 200px;
                float: left;
            }
            
            .myclass2 {
                float: left;
                background-color: black;
                width: 200px;
                height: 200px;
            }        style>
    head>

    <body>
        <span class="myclass1">span>
        <span class="myclass2">span>
    body>html>

CSS：浮动（左浮动、右浮动）_CSS_07

 

 

 一般情况下，行内元素转换为块元素需要添加属性，但是，在添加了浮动以后就可以自动转换为块元素。

 

4、浮动元素和标准父级搭配使用

一般情况下，先用标准流的父元素排列上下位置，之后内部子元素采取浮动的策略排列左右位置

<!DOCTYPE html><html>

    <head>
        <meta charset="utf-8" />
        <title>testtitle>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                height: 400px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 300px;
                float: left;
                background-color: #fffcf5;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }        style>
    head>

    <body>
        <div class="bigbox">
            <div class="left">div>
            <div class="right">div>
        div>
    body>html>

CSS：浮动（左浮动、右浮动）_浮动_08

 

 这里面一共有三个盒子，其中父盒子包含两个子盒子。没有父元素的话，盒子是直接靠近浏览器的边缘排列的，但是有了父盒子以后就只能在父盒子里面，也就是说父盒子能够限制子盒子的位置。