欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css怎么样清除浮动

程序员文章站 2022-04-15 21:42:04
...

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" />
<img src="/i/eg_smile.gif" />
</body>
</html>

效果图:

css怎么样清除浮动

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

以上就是css怎么样清除浮动的详细内容,更多请关注其它相关文章!

相关标签: css 浮动