web前端
您现在所在的位置:首页>企业动态>web前端

clear使用方法,Web前端基础知识,web前端培训

编辑:学到牛牛IT培训    发布日期: 2022-02-09 14:30:07  

在技术文档中对于clear的值是这样解释的:

描述

left

在左侧不允许浮动元素
right在右侧不允许浮动元素
both在左右两侧均不允许浮动元素
none默认值。允许浮动元素出现在两侧。
inherit规定应该从父元素集成clear属性的值。


我们在实例中看一下:

首先:在一个大盒子里放4个p标签,让p标签全部左浮动,此时会产生高度塌陷问题

clear使用方法.png

HTML代码如下:

<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
</body>

css代码如下:

<style>
    *{
    margin:0;
    padding:0;
  }
  .box{
    border:3px solid #f00;
  }
  .box p{
    width:100px;
    background-color:pink;
    border:3px solid #333;
    float:left;
  }
  p:nth-of-type(1)}
    height:60px;
    background-color:yellow;
  }
  p:nth-of-type(2)}
    height:100px;
    background-color:orange;
  }
    p:nth-of-type(3)}
    height:140px;
    background-color:green;
  }
    p:nth-of-type(4)}
    height:180px;
    background-color:blue;
  }
</style>

在前两个p标签之后添加一个空的块元素div,给这个块元素clear:left属性

HTML代码如下:

<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <div class="clear"></div>
    <p>3</p>
    <p>4</p>
  </div>
</body>

css代码如下:

.clear{ clear: left; }

clear使用方法.png

看起来是实现了元素左侧不允许有浮动,但如果给第2个p标签一个右浮动

css代码如下:

p:nth-of-type(2){
  float: right;
  height: 100px;
  background-color: orange;
}

会发现父元素只撑开了第一个左浮动的p标签的宽度。

免费试学
课程好不好,不如实地听一听

推荐阅读

  • 计算机专业的就业难度怎么样?

    国产午夜鲁丝片AV无码蜜臀,福利免费观看午夜体检区,人妻少妇精品无码专区APP,伊人久久大香线蕉成人综合网,国产妓女在线观看视频,亚洲成a人片在线观看尤物,亚洲精品国产一二三无码AV,亚汌国产一区二区三区

  • 嵌入式软件开发学习路线

    国产午夜鲁丝片AV无码蜜臀,福利免费观看午夜体检区,人妻少妇精品无码专区APP,伊人久久大香线蕉成人综合网,国产妓女在线观看视频,亚洲成a人片在线观看尤物,亚洲精品国产一二三无码AV,亚汌国产一区二区三区

  • 为什么自学编程那么难?

    国产午夜鲁丝片AV无码蜜臀,福利免费观看午夜体检区,人妻少妇精品无码专区APP,伊人久久大香线蕉成人综合网,国产妓女在线观看视频,亚洲成a人片在线观看尤物,亚洲精品国产一二三无码AV,亚汌国产一区二区三区

  • IT培训机构出来的到底好不好就业呢?

    国产午夜鲁丝片AV无码蜜臀,福利免费观看午夜体检区,人妻少妇精品无码专区APP,伊人久久大香线蕉成人综合网,国产妓女在线观看视频,亚洲成a人片在线观看尤物,亚洲精品国产一二三无码AV,亚汌国产一区二区三区

封闭学习

2

1

028-61775817

蜀ICP备2021001672号

在线咨询 免费试听VIP课程