HTML之float浮动

可以看一下大神的理解很详细：https://blog.youkuaiyun.com/qq_20404903/article/details/49024247

一、浮动的理解

   浮动的框可以向左向右移动，知道它的外边缘碰到包含框（父亲框）或者其他的浮动框位置，因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就行浮动框不存在一样

二、浮动的分类：

   left:   左浮动

   right:   右浮动

   none:  默认值，不浮动

   inhert:  继承父亲框的浮动属性

三、怎么理解浮动脱离了标准文档流

    1.要搞清这个问题，首先要明白什么是标准文档流

      标准文档流布局情况：从上到下、从左至右分布，遇到块级元素换行

   2.分析

     脱离标准文档流就是不符合上面的分布状况了，而我们的浮动float已经实现遇块级元素不换行了，所以我们只需先证明这一点就行了。

  3.演示

  没有使用浮动：

   代码：  

    <div style="width:600px;height:500px;background:#FF0;margin:0 auto;">

      <div style="width:180px;height:80px;background:#06F">div1</div>
      <div style="width:220px;height:80px;background:#303">div2</div>

    </div>

  效果图：

    

  div1使用左浮动：

   效果图：

   

  4.结论

    当div1使用左浮动时，该div已经脱离了原来的轨迹，完全浮动到下个块状元素的上方,下面的块状元素就当做上方没东西，所以就占用了上面的元素的位置

四、我对float的理解

  首先要明白什么是行内元素和块状元素

  块状元素：可以设置width、height;可以设置内外边距；独占一行（除了使用float之外）

  行内元素：不可以设置width、height但是可以使用line-height替代;内外边距（padding、margin）的左右边距可以设置，上下不起作用；不是独占一行

  1.使用了浮动之后就相当于将该元素抠出来了，将之放在假想的第二层，不影响下面的块状元素操作，就长做浮动的元素不存在就行了，记住我这里说的是不影响块状元素的操作。

  2.两个相邻的浮动元素可以认为是在同一层

  3.如果元素（包括块状和行内元素）使用浮动，紧接着的如果是行内元素就相当于使用了左浮动、

下面我对上面的理解用实例来解释一下

  实例：

     原代码：

         <style type="text/css">
   #div1{
    width: 100px;
    height: 50px;
    background-color: red;
}


#div2{
    width: 200px;
    height: 50px;
    background-color: green;
}


#div3{
    width: 300px;
    height: 50px;
    background-color: black;
}


#div4{
    width: 400px;
    height: 50px;
    background-color: blue;
}
</style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <input id="input1" type="text" value="input1">
    <div id="div4">div4</div>
    <input id="input2" type="text" value="input2">
</body>

  效果图：

   

  （1）、添加div1的左浮动

       效果图

可以得出第一个结论

（2）、div1和div2一起使用左浮动

 

说明：div1和div2把div3给覆盖了

可以看出来两个浮动元素都在第二层

（3）div3添加左浮动

行内元素input1相当于一个添加了一个float一样与div3一起在第二层

五、当多个浮动在同一行不够位置填充的情况下

如果右侧宽度不够，就向下面显示，首先会找到高度最小的那个，如果右侧还有高度较高的，则在这个高的右侧再找高度最小，知道找到右侧没有较高的，倘若到了最后都没找到，就转到下一行最左侧填充，应该填充在上面的浮动的最突出的水平线之下

看例子

代码：

  <style type="text/css">
      .div1{
     width:120px;
 height:50px;
 background:pink;
 border:1px solid blue;
 }
  
  </style>
 </head>
 <body>
   <div style="width:400px;height:300px;border:1px solid red;">
 <div class="div1" style="height:100px;">div1</div>
      <div class="div1" style="height:80px;">div2</div>
      <div class="div1">div3</div>
 <div class="div1">div4</div>
   </div>

 </body>

效果：

现在给四个div都添加上左浮动

div1和div2换一下位置

div2和div3换一下位置

div1和div3换一下位置