sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > CSS3教程 > css教程实例 > css清除浮动的几种方法[css怎么样清除浮动]

css清除浮动的几种方法[css怎么样清除浮动]

作者:cuteur发布时间:2022-11-22分类:css教程实例浏览:47评论:0


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

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

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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>
登录后复制

效果图:

dcf3fbbd113bc64a890def39918c2de.png

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

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


欢迎 发表评论:

css教程实例排行
«    2023年1月    »
1
2345678
9101112131415
16171819202122
23242526272829
3031
标签列表
网站分类
文章归档
最近发表
推荐文章