CSS — flaot浮动的原因与副作用

最新推荐文章于 2022-01-09 23:39:33 发布

秋成

最新推荐文章于 2022-01-09 23:39:33 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识积累文章标签： CSS 浮动原因和副作用

本文链接：https://blog.youkuaiyun.com/u012832088/article/details/82215539

前端知识积累专栏收录该内容

17 篇文章

订阅专栏

本文探讨了CSS中float属性的四个参数——left、right、none和inherit，分析了浮动元素脱离标准文档流的原因，并详细阐述了浮动带来的副作用，如元素覆盖、父元素塌陷等现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>