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

最新推荐文章于 2023-10-18 21:02:51 发布

秋成

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/u012832088/article/details/82215539

版权

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

摘要由CSDN通过智能技术生成

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: