文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

清除浮动的css写法是什么

2024-04-02 19:55

关注

小编给大家分享一下清除浮动的css写法是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  一、float(浮动)是什么

  float属性定义元素在哪个方向浮动。

  float:left元素向左浮动。

  float:right元素向右浮动。

  float:none默认值。元素不浮动,并会显示在其在文本中出现的位置。

  float:inherit规定应该从父元素继承float属性的值。

  看一段简单的代码:

  <divclass="child1">左浮动</div>

  <divclass="child2">右浮动</div>

  <divclass="child3">喵</div>

  .child1{

  float:left;

  height:500px;

  width:70%;

  background:#aa0;//黄

  }

  .child2{

  float:right;

  height:300px;

  width:30%;

  background:#0aa;//青

  }

  .child3{

  background:#a0a;//紫

  }

  201904291427231.png

  二、clear是什么

  clear属性指定段落的左侧或右侧不允许浮动的元素。

  clear:left在左侧不允许浮动元素。

  clear:right在右侧不允许浮动元素。

  clear:both在左右两侧均不允许浮动元素。

  clear:none默认值。允许浮动元素出现在两侧。

  clear:inherit规定应该从父元素继承clear属性的值。

  比如上面的例子,我们为child3加上clear:both;,便可清除浮动。(child3的左右两侧都不允许浮动元素,自然而然不会再跟在俩浮动元素的屁股后面了~)

  201904291427232.png

  那么,只在一侧不允许浮动是怎样的呢?

  本来是酱紫的:

  那么,只在一侧不允许浮动是怎样的呢?

  本来是酱紫的:

  <divclass="child1">child1右浮动</div>

  <divclass="child2">child2右浮动</div>

  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1{

  float:right;

  background:#aa0;//黄

  }

  .child2{

  float:right;

  background:#0aa;//青

  }

  201904291427233.png

  然后,为child2加上clear:right;,在child2的右侧不允许浮动元素,所以child2就飘到了下一行。

  201904291427234.png

  那么,为child1加上clear:left;的时候,为什么不起效果呢?在这留个小彩蛋,欢迎大家留言讨论~

  三、浮动带来的影响

  浮动带来的最大影响就是,当父元素只包含浮动的子元素的时候,父元素的高度就会塌陷(height变为0)。

  像酱紫:(parent高度为0,无法显示粉色背景)

  <divclass="parent">

  <divclass="child1">child1右浮动</div>

  <divclass="child2">child2右浮动</div>

  </div>

  .parent{

  background:#FBC;//粉

  }

  201904291427235.png

  四、清除浮动的方式

  1.在父元素中的结尾加一个空div

  div

  <divclass="parent">

  <divclass="child1">child1右浮动</div>

  <divclass="child2">child2右浮动</div>

  <divstyle="clear:both;"></div>

  </div>

  .child1{

  float:right;

  background:#aa0;

  }

  .child2{

  float:right;

  background:#0aa;

  }

  201904291427246.png

  可见,空div高度为0,位于父盒子的最下面,使父盒子重新撑起了应有的高度。

  为什么要在最后加?倘若你在中间加,效果会是酱紫:

  201904291427247.png

  由于空div的左右都不允许浮动元素,那么它就会另起一段,导致盒子位置的效果就像child2清除右侧浮动一样,child2跑到了child1下方。

  2.在父元素设置overflow属性

  &bull;原理:设置overflow:hidden或overflow:auto,浏览器会自动检查浮动区域高度(才能知道父框的内容有无溢出)

  &bull;优点:浏览器支持好

  &bull;缺点:子元素若超出父元素尺寸会被隐藏,或者父元素出现滚动条

  <divclass="parent"style="overflow:hidden;">

  <divclass="child1">child1右浮动</div>

  <divclass="child2"style="position:relative;top:10px;">child2右浮动</div>

  </div>

  201904291427248.png

  当设置overflow:auto;时,父元素会出现滚动条:

  201904291427249.png

  3.伪元素

  &bull;原理:类似设置clear属性

  &bull;优点:浏览器支持好,普遍

  <divclass="parentclearfix">

  <divclass="child1">child1右浮动</div>

  <divclass="child2">child2右浮动</div>

  </div>

  .clearfix{

  zoom:1;//zoom(IE专有属性)可解决ie6,ie7浮动问题

  display:block;

  }

  .clearfix:after{

  content:".";//content:"";也可

  visibility:hidden;

  display:block;

  height:0;

  clear:both;

  }

以上是“清除浮动的css写法是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯