css中flaot浮动的原因及带来的问题分析

本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

flaot浮动的原因与副作用

float中的四个参数

left，right，none，inherit

float 浮动的原因

使用浮动之后，元素会脱离标准的文档流。（标准的文档流就是按照不同的元素种类，如块元素，行元素按照各自的特点去排列显示，虽然属性不同，但都是按照从上到下，从左到右的顺序进行排列）

float 浮动的副作用

两个块级元素，会被浮动元素覆盖

    .box{          border: 4px solid #000000;                width: 200px;                height: 200px;                display: inline-block;              }    .itemSmall_1{          background-color: chartreuse;                width: 40px;                height: 40px;                border: 2px solid #000000;                /* float: left; */    }    .itemSmall_2{          background-color: chartreuse;                width: 40px;                height: 40px;                border: 2px solid #000000;                float: left;              }    .itemBig{          background-color: blue;                width: 150px;                height: 150px;                border: 2px solid #000000;              }      
      
      
      
      
    
    
      
      
      
      
    
  

登录后复制

*一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间。

    .box{          border: 4px solid #000000;                width: 200px;                height: 200px;                display: inline-block;                vertical-align: top;              }    .itemSmall_1{          background-color: chartreuse;                width: 40px;                height: 40px;                border: 2px solid #000000;                /* float: left; */    }    .itemSmall_2{          background-color: chartreuse;                width: 40px;                height: 40px;                border: 2px solid #000000;                float: left;              }    .itemBig{          background-color: blue;                width: 150px;                height: 150px;                border: 2px solid #000000;              }        
      
      
      
      
    
    
      
      
      行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素    
  

登录后复制

*两个块级元素浮动，出现父元素塌缩

立即学习“前端免费学习笔记（深入）”；

    .box{          border: 4px solid #000000;                float: left;              }    .itemSmall_2{          background-color: chartreuse;                width: 40px;               height: 40px;                border: 2px solid #000000;                float: left;              }       .itemBig2{           background-color: blue;                 width: 150px;                 height: 150px;                 border: 2px solid #000000;                 float: left;               }        
      
      
      
      
    
  

登录后复制

相关推荐：

css父类清除浮动的原因详解

详解css中的浮动与三种清除浮动的方法

以上就是css中flaot浮动的原因及带来的问题分析的详细内容，更多请关注【创想鸟】其它相关文章！