首页  >  文章  >  web前端  >  css怎么样清除浮动

css怎么样清除浮动

coldplay.xixi
coldplay.xixi原创
2021-04-16 15:27:163265浏览

css清除浮动的方法是使用clear属性清除浮动,clear属性定义了元素的哪边上不允许出现浮动元素,代码为【img{float:left;clear:both;}】。

css怎么样清除浮动

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css清除浮动的方法:

css可以使用clear属性清除浮动。clear属性介绍如下:

clear属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。

在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

属性值:

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

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

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

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

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

使用clear属性清除浮动示例:

图像的左侧和右侧均不允许出现浮动元素:

<html>
<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>
<body>
<img  src="/i/eg_smile.gif" / alt="css怎么样清除浮动" >
<img  src="/i/eg_smile.gif" / alt="css怎么样清除浮动" >
</body>
</html>

效果图:

css怎么样清除浮动

相关教程推荐:CSS视频教程

以上是css怎么样清除浮动的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn