css中flaot浮动的原因及带来的问题分析-css教程-PHP中文网

flaot浮动的原因与副作用

float中的四个参数

float 浮动的原因

float 浮动的副作用

首页

web前端

css教程

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

不言

Aug 30, 2018 am 11:12 AM

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

flaot浮动的原因与副作用

float中的四个参数

left，right，none，inherit

float 浮动的原因

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

float 浮动的副作用

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

<style type="text/css">
    .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;    
          }
  </style><body>
    <div class="box">
      <div class="itemSmall_1">

      </div>
      <div class="itemBig">

      </div>
    </div>
    <div class="box">
      <div class="itemSmall_2">

      </div>
      <div class="itemBig">

      </div>
    </div>
  </body>

登录后复制

*一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间。
这里写图片描述

<style type="text/css">
    .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;    
          }
  </style>
  <body>
    <div class="box">
      <div class="itemSmall_1">
      </div>
      <div class="itemBig">
      </div>
    </div>

    <div class="box">
      <div class="itemSmall_2">
      </div>
      行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素    </div>
  </body>

登录后复制

*两个块级元素浮动，出现父元素塌缩
这里写图片描述

<style type="text/css">
    .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;    
           }
  </style>
  <body>
    <div class="box">
      <div class="itemSmall_2">
      </div>
      <div class="itemBig2">
      </div>
    </div>
  </body>

登录后复制